Why does alert() pop up, but not dialogs, or DIV before running graphics?

I'm using jQuery with jqPlot. Since it takes a few seconds to display different data I want to add some indicator that the data is being processed so that the user doesn't think the slider isn't working.

Right before executing jqPlot I've tried showing this div:

<div id=loading>
   <p>loading</p>
</div>

When stepping through the code with Firebug, the DIV is shown and disappears correctly after jqPlot completes but when I run the program normally, the DIV is shown after the graph is redrawn.

I've also tried using a dialog box. That too displays after the graph is drawn.

But when I use an alert() box, the alert first appears, I press 'ok' then the graph is drawn.

What do I have to do to display some type of message before the graphics completes?

The CSS code (just something to make it very visible):

        .loading {
            font-size: 50pt ;
            border: 1px solid #000000;
            width: 1250px;
            background-color: green;
        }    

The code that shows/hide the .loading DIV

        <div class="layout"> 
                <div class="layout-slider-settings"></div>     

                <div class="layout-slider">
                  <input id="Slider0" name="area" value="1" >
                </div>
                <script type="text/javascript" charset="utf-8">
                  jQuery("#Slider0").slider(  
                         lots of parameters here
                    {
                       $( ".loading" ).show() ;
                  //     alert("Am I visible?" ) ;  IF THIS IS UNCOMMENTED, THE 'loading' MESSAGE DOES NOT APPEAR                       
                       x = this.getValue() ;                      
                       plot0.replot(); 
                       plot0.destroy() ;                                                            
                       plot0 = createChart( line0, 'chart0', 'Package ONE', 4, 9, x*7) ;
                       // alert("about to disappear" ) ;
                        $( ".loading" ).hide() ;                        
                    } 
                    });

                </script>
                <div class="layout-slider-settings">                
                </div>
        </div>
        <div class="loading"><p>loading</p></div> 

The createChart code:

<script type="text/javascript" >
          function createChart( data, chart, title, lowerLimit, upperLimit, numDays )
        {

               plot = $.jqplot( chart,  [data], {

                lots of parameters here

            });   
            return plot ;     
        } <!-- end create document -->          

The document ready code:

$(document).ready(function(){

   $( ".loading" ).hide() ;
   $.jqplot.config.enablePlugins = false;   
}); 

Walking through 开发者_运维百科the code or using alert() will display 'loading' message.

It's most likely a JS single-threaded situation - there is no async event to allow the DOM to update after your show. Try this.

 $( ".loading" ).show() ;
 window.setTimeout(function() {

     //     alert("Am I visible?" ) ;  IF THIS IS UNCOMMENTED, THE 'loading' MESSAGE DOES NOT APPEAR                       
     x = this.getValue() ;                      
     plot0.replot(); 
     plot0.destroy() ;                                                            
     plot0 = createChart( line0, 'chart0', 'Package ONE', 4, 9, x*7) ;
     // alert("about to disappear" ) ;
     $( ".loading" ).hide() ;         
},50);

You just need to release the thread long enough for something else to happen.

Also: why do you run the jqPlot setup script before document.ready? That seems brittle, it may work because you actually create the DIV right before the script, but seems to have no benefit and it is difficult to follow the code flow.

You should try to always rely on callbacks instead of trying to rely on timing.