Im trying to show a loading div while waiting for an ajax call to plete. I have tried a couple of methods but cant seem to get anything to work consistently.

with my current code it works if i have a break point on the function that shows the div once the ajax is plete.

Fiddle

var https = '/';

function HideCheckShowLoading(checkId) {
    $("#check_" + checkId).hide('slow', function() {
        $("#loading_" + checkId).show('slow');
    });
};

function HideLoadingShowCheck(checkId) {
    $("#loading_" + checkId).finish().hide('slow', function() {
        $("#check_" + checkId).finish().show('slow');
    });
};
$(document).ready(function() {
    $('#get').click(function() {
        HideCheckShowLoading(1);
        $.ajax({
            url: https,
            dataType: 'jsonp',
            type: "GET",
            success: function(response) {
                //do something
            },
            error: function() {
                //do something else                
            }
        }).done(function() {
            HideLoadingShowCheck(1)
        });

    });
    $('#get2').click(function() {
        HideLoadingShowCheck(1);
    });

});

#check_1
 {
    background-color:red;
}

#loading_1
 {
    background-color:blue;
}

<script src=".11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>

Im trying to show a loading div while waiting for an ajax call to plete. I have tried a couple of methods but cant seem to get anything to work consistently.

with my current code it works if i have a break point on the function that shows the div once the ajax is plete.

Fiddle

var https = 'https://www.googleapis./calendar/v3/calendars/';

function HideCheckShowLoading(checkId) {
    $("#check_" + checkId).hide('slow', function() {
        $("#loading_" + checkId).show('slow');
    });
};

function HideLoadingShowCheck(checkId) {
    $("#loading_" + checkId).finish().hide('slow', function() {
        $("#check_" + checkId).finish().show('slow');
    });
};
$(document).ready(function() {
    $('#get').click(function() {
        HideCheckShowLoading(1);
        $.ajax({
            url: https,
            dataType: 'jsonp',
            type: "GET",
            success: function(response) {
                //do something
            },
            error: function() {
                //do something else                
            }
        }).done(function() {
            HideLoadingShowCheck(1)
        });

    });
    $('#get2').click(function() {
        HideLoadingShowCheck(1);
    });

});

#check_1
 {
    background-color:red;
}

#loading_1
 {
    background-color:blue;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>

What i would like to happen is,

1. on the click of a button we hide the check div
2. we show the loading div
3. make the ajax call
4. if successful do something(Reload the contents of the check div)
5. hide the loading div
6. show the check div

As said I have tried a few methods that i have found but i repeatedly get stuck with just the loading div shown

Thanks

• javascript
• jquery
• html
• css
• ajax

• Close, just change .done(HideLoadingShowCheck()); to .done(HideLoadingShowCheck); (without the extra ()) – fdomn-m Commented Nov 10, 2016 at 14:42
• Look at beforeSend – epascarello Commented Nov 10, 2016 at 14:54

2 Answers 2

I believe you may be slightly over-plicating things here. Something simple like this would suffice:

$('#get').click(function() {
    HideCheckShowLoading();
    $.ajax({
       url: https,
       dataType: 'jsonp',
       type: "GET",
       success: function (response) {
           //do something
       },
       error: function() {
           //do something else                
       },
       plete: HideLoadingShowCheck
   });
});

If you don't want the HideLoadingShowCheck routine to happen after success or error (standard behavior of plete), you can just move a function call HideLoadingShowCheck(); into your success and error blocks instead of using plete.

When you add () to a function name, it calls it immediately and returns the result. What you want to do is pass the function itself, not the result of the function - and you do that without the ().

There's no need for the $.when (assuming HideCheckShowLoading() doesn't make an ajax call, the jquery animations work differently), and $.ajax returns the promise itself, so you can update your code to:

$(document).ready(function() {
    $('#get').click(function() {
        HideCheckShowLoading();
        $.ajax({
           url: https,
           dataType: 'jsonp',
           type: "GET",
           success: function (response) {
               //do something
           },
           error: function() {
               //do something else                
           }
        }) 
        //.done(HideLoadingShowCheck);
        .done(function() { HideLoadingShowCheck(otherparams); })
    });
});

I would change the showcheck function to add .finish() incase it's still animating from the showhide:

function HideLoadingShowCheck() {
    $("#loading").finish().hide('slow',function () {
        $("#check").finish().show('slow');
    });
};