Dinerdo Dinerdo - 9 months ago 65
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(){


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


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.


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.