Dinerdo Dinerdo - 2 months ago 21
Ajax Question

Internet Explorer blocking UI change before synchronous ajax

I make an ajax call which performs some function, but before it happens (since I have to run the function with async set to false), I want to put some text on the page saying "Loading...". This works just fine in Chrome, FireFox, and Opera.. But in IE, it seems as if it knows that there's a possibility of the ajax call coming up and it just blocks all changes to the UI until it's over.
I use ".show" on a label when my button is clicked, and after the .show, there should be the ajax call followed by a "Success" alert. Why does this happen only in IE and is there a way around it?

Sample code:

<input value="" id="myURL" size="40">
<input type="button" onclick="someFunction();" value="Submit" id="submitButton">




function someFunction(){

$('#submitButton').hide();

if($('#myURL').val().length > 0)
alert("Please enter valid value before submission");

//anyAjaxCall

$().SPServices({
operation: "CopyIntoItems",
webURL: "http://example2/",
async: false,
SourceUrl: "http://example1/5646489186.html",
Stream: "PGh0bWw+DQoJPGJvZHk+DQoJCWpxdWVyeS5TUFNlcnZpY2VzLTAuNS4xQUxQSEExLmpzIGlzIGZhbnRhc3RpYyENCgk8L2JvZHk+DQo8L2h0bWw+",
DestinationUrls: ["http://example2/sharepoint/postProto/5646489186.html"],
completefunc: function(xData, Status) {
alert("Status=" + Status + " XML=" + xData.responseXML.xml);
}
});

}




In the above example, the submit button won't hide in IE though it will in all other browsers. The function itself actually works.
Update: I know I shouldn't set it to false, but there's a lot of other code on this page that conflicts with mine, and this was the only way I could get it to work.

edit: I really would appreciate any insight on why you feel my question deserved any negative points. I specifically said that this happened for ALL of the requests that I made. Any sort of ajax request and show/hide combination worked that way. I understand why an example might've been nice, but it really was irrelevant.

Answer

IE tends to show that behavior for any kind of synchronous request, whether it be AJAX or not – even trying to modify the UI before submitting a form the “old-fashioned” way without using AJAX can trigger that.

But “decoupling” both actions from one another using a short timeout usually works fine.

So try and do your UI manipulation, and then call the method making the request like so,

window.setTimeout(function() { $().SPServices(…); }, 10);

– that should do the trick.

Comments