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

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().

I think Chrome and Safari is executing your Ajax request synchronously, despite aynch flag. To get around that, you could hide the icon in a callback of ajax function like this:

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