How to get DOM to update / update before and after ajax request?

Question

I have a problem with a browser with the Busy icon. The code is as follows:

$("#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 fine in Firefox, however in Chrome and Safari the busy symbol is not displayed. I believe that Chrome and Safari cache the changes in the DOM, and call $ ("busysymbol"). Show () is not immediately updated.

Is there a way to get Chrome / Safari to refresh the display.

Answer 1

Perhaps try using ajaxStart and ajaxStop global events for your busy symbol. For instance:

 $("#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 just noticed that you are using synchronous requests, so it’s not even AJAX - it is more like SJAX. Do you have a very good reason to completely block the user interface of your browser while you wait for the request or timeout to complete? If not, 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 verified)

Try it if it works without rearranging #busysymbol, and then try adding the correct positioning at the very beginning. Keep in mind that .position() does not accept arguments, so the longest line in your code actually did nothing - see the docs . You need .offset() or .css() .

Answer 2

I think Chrome and Safari execute your Ajax request synchronously, despite the aynch flag. To get around this, you can hide the icon in the ajax function callback as follows:

 $.ajax({ url: 'book_ajax.php?req=daysformonth&month=1', success: function(data) { $("#busysymbol").hide(); } });