Element not shown before jQuery ajax call

Question

I have an ajax loader gif that should be shown before the ajax call is triggered and hidden on ajax complete, however the element is not showing up.

If I debug using inspect and run step by step the element is shown.

    $("#ajaxLoader").show();
    $('.spn-invalid-zip').hide();
    $("#txtZipCode").removeClass("input-validation-error-style");
    if ($("#inValidZipCode").length <= 0) {
        $($('#txtZipCode').parent()).append("<span id='inValidZipCode' class='spn-invalid-zip input-validation-error-style'></span>");
    }
    var valZipCode = value;
    if (valZipCode.length < 5) {
        resetCountyFields();
        return false;
    }
    var zipCodeResult = false;
    $.ajax({
        url: path,
        type: "POST",
        data: { zipcode: valZipCode },
        async: false,
        success: function (data) {
            ....
        },
        complete: function () {
            $("#ajaxLoader").hide();
        }
    });

It's not showing up because you're using `async: false`. Remove it; it's *terrible* practice to use. That's why your browser gives you console warnings for it — Rory McCrossan, Sep 09 '16 at 07:04
Good stuff. I added it as an answer with an explanation for you — Rory McCrossan, Sep 09 '16 at 07:07

Rory McCrossan · Accepted Answer · 2016-09-09T07:11:06.580

2

The issue is because you use async: false in your AJAX call. This blocks the UI thread of the browser from updating while the request is in transit, and hence the imagery you show/hide is never updated on the user's screen. If you remove that property from your AJAX options, your code will work fine:

$("#ajaxLoader").show();

// your logic here:

$.ajax({
    url: path,
    type: "POST",
    data: { zipcode: valZipCode },
    success: function (data) {
        ....
    },
    complete: function () {
        $("#ajaxLoader").hide();
    }
});

Setting the async property to false is used to make the request synchronous, so that you don't need to use callback functions to retrieve the data in the request and so that the UI will not update until the request ends. It's really bad practice though, and the console will warn you about its use as the browser will appear to the user that it has hung until the request complete, which could be several seconds of inactivity.

It's only valid for use in certain situations where code has to complete before the UI updates, onbeforeunload for example. Other than that you should never ever use it.

edited Sep 09 '16 at 07:11

answered Sep 09 '16 at 07:06

Rory McCrossan

331,213
40
305
339

May I know the use of this property and when can it be used? – RandomUser Sep 09 '16 at 07:07
2

It's used to make the request synchronous, so that you don't need to use callback functions to retrieve the data in the request and so that the UI will not update until the request ends. It's really bad practice though, and the browser will warn you about its use as it will appear to the user that the browser has hung until complete. It's only valid for use in certain situations where code *has* to complete before the UI updates, `onbeforeunload` for example. Other than that you should never ever use it – Rory McCrossan Sep 09 '16 at 07:08
But I have the show element statement before the call right? – RandomUser Sep 09 '16 at 07:10
1

That's right, but the UI thread doesn't get a chance to update before the JS has executed the sync AJAX call which stops the UI from updating. – Rory McCrossan Sep 09 '16 at 07:11
1

The process is like this: tell DOM to show image > make sync AJAX call > block UI thread while request runs > ... > request completes > update UI which shows the queued image, and immediately hides it again as your `complete` handler executes. – Rory McCrossan Sep 09 '16 at 07:13

Element not shown before jQuery ajax call

1 Answers1