How do I force DOM to update/refresh just before and after an ajax query?

Question

I'm having a browser issue with my Busy icon. The code looks like this:

$("#busysymbol").show();
$("#busysymbol").position({my:"right top",at:"right top",of:$("#datepicker"),offset:"-3 3"});
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1",
        cache: false,
        async: false
        }).responseText;
$("#busysymbol").hide();
var daysInMonth = resp.split(",");
...etc...

This code works perfect in Firefox however in Chrome and Safari the busy symbol is not showing. I believe Chrome and Safari are caching up the changes to the DOM and the $("busysymbol").show() call is not immediately refreshing.

Is there a way I can force Chrome/Safari to update the display.

Answer 1

Maybe try using ajaxStart and ajaxStop global events for your busy symbol. For example:

$("#busysymbol").ajaxStart(function(){
    $(this).show();
});
$("#busysymbol").ajaxStop(function(){
    $(this).hide();
});

at the beginning of your code, and remove the hiding and showing from your specific .ajax() handlers.

Oh, I've just noticed that you are using synchronous requests, so it's not even AJAX – more like SJAX. Do you have some very good reason to completely block the user interface of your browser while you're waiting for the request to either complete or timeout? If not then try using something like this:

$("#busysymbol").hide();
$("#busysymbol").ajaxStart(function(){
    $(this).show();
});
$("#busysymbol").ajaxStop(function(){
    $(this).hide();
});
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1",
        cache: false,
        success: function (resp) {
            var daysInMonth = resp.split(",");
            ...etc...
        }
});

(not tested)

Try if it works without repositioning the #busysymbol and then try to add the correct positioning at the very beginning. Keep in mind that .position() doesn't take arguments so that longest line in your code wasn't actually doing anything – see the docs. What you need is .offset() or .css().