IE9 and Chrome not showing loading div during AJAX call

[bbolte]

I'm trying to debug a bit of code and can't seem to figure out why this won't work. I've read through the AJAX/AJAX events on the Jquery site, read through several Stack threads and still this won't work. The script is showing and hiding DIVs during an AJAX call. The DIV with the "loading" animated gif won't show, so it appears to the user that nothing is going on. I was able to get the div to show with a settimeout, but the animation wasn't running. below is the code, anyone have any pointers for me?

function ajax_email_proc() {
    $("div#email_proc_form").hide();          // hide form
    $("div#emaiL_proc_saving").show();     // show loading gif
    $('.procselector:checked').each(function(index) {
        for (var i=0; i< email_array.length; i++) {
        $.ajax({
             url:'/viewproc/email_view_proc/'+$(this).val()+'/XXXXXXXXXXXX,
	     type:'POST',
	cache:false,
		data:'XXXXXXXXXXXXXXXXXXX',
		success:function(returnData){
			$("div#emaiL_proc_saving").hide();
			$("div#email_proc_done").show();
	},async:false
	});//close ajax function
} // for email array loop
}); // each loop
}

[bbolte]

forgot to mention that the form doesn't hide until the AJAX call is complete

[Markdidj]

How about going the css way?
this is what I use to show an action is being executed......

#main.loading div *{opacity:0.7;}

And then I add "loading" to the className of main before the request goes to the server, and remove it when the request is complete.

You can have whatever you want in the css

[bbolte]

it might work, but, after researching more, I think it has more to do with IE and synchronous AJAX calls. If I wrap the AJAX call in a timeout, I get the spinner briefly and then the browser "freezes" until the call is done. Evidently, this is a "feature" of IE (and apparently Chrome as well).

And, unfortunately, I have to do the AJAX synchronously...

[bbolte]

this is more-or-less working, but as I said, the spinner quits once the AJAX call goes. But then, even the menus are inaccessible in IE until the call finishes.

setTimeout(function() {
											// Get All Procedures that were selected
											$('.procselector:checked').each(function(index) {			// Loop through each checkbox
												for (var i=0; i< email_array.length; i++) {					// And send each one to all email addresses

													$.ajax({
														url:'/viewproc/email_view_proc/'+$(this).val()+'/XXXXXXXXXXXXXX,
														type:'POST',
														cache:false,
														async:false,
														data:'XXXXXXXXXXXXXXXXXXXXXXX',
														beforeSend : function() {
															$("div#email_proc_form").hide();
								               $("div#emaiL_proc_saving").show();
								            }
														}).done(function(){
															$("div#emaiL_proc_saving").hide();
															$("div#email_proc_done").show();
														});//close ajax function
												} // for email array loop
											}); // each loop
},1000);

[Markdidj]

I don't get page freeze in any browser, and my whole site works both syncronously and asyncronously. But then I don't use AJAX or Jquery. My stuff predates that by a little while.

[bbolte]

I do appreciate the input