jquery ui async ajax request set to false causes issues

Question

Hi folks,

I have got an issue with our beloved browser IE (all versions) and the tab ui control from jquery. I load my content for the tabs with the ajax option. Problem now is that i have to do that synchronously so each request after another cause async. doesnt works for me or just very buggy. But this is not the problem. The issue is that IE dont apply the ui-state-processing before its locks down every execution of over jquery code. It seems that IE behaves here differently than all the other browsers. It is kind of wierd cause once the request is finished the processed the class gets applied on the tab element just to disappear instantly cause everything is done.

Has anyone a idea what this could be ? known issue ?

Btw, it works perfect when i set the async option to true.

Tee

Answer 1

Yes, this is how IE functions. Basically, browsers work like this:

while (stillRunning()) {
    renderDOM();
    getNextInputEvent();
    runScripts();
}

In other words, you don't get the DOM updated until scripts finish running. Now, even IE will update the DOM out of sequence in some cases (only running an alert() or confirm() comes to mind) but generally it doesn't. Other browsers will sometimes update the DOM out of sequence, and this is what you're encountering: a case where your non-IE browsers are updating the DOM despite still being stuck in the script-running stage (because you're doing a synchronous call, it's not finishing the script until you get the return value).

When you run it asynchronously, of course, the browser doesn't get stuck in the script-running stage, so it's free to update the UI.

This is why most Web apps use async calls; because doing them doesn't freeze your interface.

Answer 2

I have just the opposite problem ... IE only works when async is set to false.