Question

I am attempting to display a dialog to user while performing an AJAX call using JQuery. I NEED the call to be “async: false” because other parts of the page are dependant on the data and I cannot include all of the code needed in the “success” field.

Using Firefox and Opera, the dialog box displays properly, however in IE and Chrome it waits until the page is completely rendered and does not display the dialog box at all. Here is a sample this is pretty close to the actual implementation, this is a much larger project I have tried to strip it down to the minimums involved.

http://jsfiddle.net/mcraig_brs/eNMna/

I would like to find a way to display the dialog BEFORE starting the ajax call and close the dialog when it is complete. The AJAX call MUST remain “async: false”. Is this possible and How can I do this?

Any help would be appreciated. The final answer needs to work in IE8/9, Firefox, and Chrome. Opera and Safari would be bonus 🙂

In response to one of the responses, I have modified the fiddle to show what I mean:

http://jsfiddle.net/mcraig_brs/BBhdS/

Answer 1

Try running all your code after the document is ready:

$(function(){
  var page = new pageManager();
  page.LoadData();
});

If the code is executed before the document is completely ready, some of jQuery’s selectors (for example, $("#dialog")) may have no effect because the elements are not ready yet. It depends on how the browser constructs the page vs. how the elements are ordered, etc.