Help rendering loading message (in document.ready)

Help rendering loading message (in document.ready)

I have a page that consists of a form with some custom user inputs.  There is some heavy duty JavaScript involved in initializing the inputs the displaying messages about the state of the inputs.  All of that JavaScript happens on form load - currently in document.ready(). 

I want to display a loading message (and eventually a progress bar) as these fields are initialized.  My first attempt was to use blockUI, however it appears that blockUI cannot be called from within document.ready().  If I make a call to the function that uses blockUI within document.ready, nothing happens.  If I make the call outside of document.ready, the interface is blocked as expected.  My next attempt was to use the dialog widget.  Again, when called through document.ready, my dialog box does not appear.  When called outside of document.ready, everything works fine. Here's where it gets a bit funky.  If I put an alert() just after my dialog is set to open...it works (even on page load, through document.ready).  Also, if I use firebug to step through the code...it works (even on page load, through document.ready). 

Does anyone know what is going on here?  The behavior is the same in firefox and IE.  Is there something about calling the alert function that triggers the page to re-render?  Why would it not render in the first place?

The important snippets from my code are below.  Any input is greatly appreciated.

  1. $(document).ready(function() {
  2.       showLoadingMessage();
  3.       initFields();
  4.       removeLoadingMessage();
  5. });


  7. function showLoadingMessage(blockAll) {   
  8.     // create dialog if not already done
  9.     var dialogBox = $('#dialogBox');
  10.     if(dialogBox.length == 0) {
  11.         // create div
  12.         dialogBox = $('<div id="dialogBox" title="Loading"><p>Loading stuff...</p></div>').appendTo($(document.body));
  13.        
  14.         // create dialog
  15.         dialogBox.dialog({autoOpen:false, draggable:false, width:300, height:100, resizable:false, closeOnEscape:false, modal:false });
  16.        
  17.         // hide 'x' that closes the box
  18.         // FIXME: just hide 'x' for this dialog box instead of all dialog boxes
  19.         $(".ui-dialog-titlebar-close").hide();
  20.     }
  21.    
  22.     // if the window is loaded, we can use blockUI
  23.     // otherwise we just hide the stdContent all together
  24.     if(window.isLoaded) {
  25.         if(blockAll) {
  26.             $.blockUI({message: null});
  27.         } else {
  28.             $("#stdContent").block({message: null});
  29.         }
  30.     } else {
  31.         $('#stdContent').hide();
  32.     }
  33.    
  34.     // open the dialog box
  35.     dialogBox.dialog('open');
  36.    
  37.     alert('Dialog box only renders if this alert is in the code');
  38.    
  39.     // for testing, show the message for at least 3 seconds
  40.     sleep(3000);   
  41. }

  43. /**
  44.  * Fairly ridiculous function that freezes the browser for the
  45.  * specified number of ms.
  46.  */
  47. function sleep(ms) {
  48.     var start = new Date().getTime();
  49.     var timePassed = 0;
  50.     while(timePassed <= ms) {
  51.         timePassed = new Date().getTime() - start;
  52.     }
  53. }