title: How to show JQuery UI dialog box before an AJAX call?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="http://jsfiddle.net/mcraig_brs/eNMna/" rel="nofollow">http://jsfiddle.net/mcraig_brs/eNMna/</a></p>
  
  <p>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?</p>
  
  <p>Any help would be appreciated. The final answer needs to work in IE8/9, Firefox, and Chrome.  Opera and Safari would be bonus :)</p>
  
  <p>In response to one of the responses, I have modified the fiddle to show what I mean:</p>
  
  <p><a href="http://jsfiddle.net/mcraig_brs/BBhdS/" rel="nofollow">http://jsfiddle.net/mcraig_brs/BBhdS/</a></p>