jqueryjquery-chaining

Chaining the events


I have the following javascript function which will load data from a server page to the div This is working fine with the FadeIn/FadeOut effects

function ShowModels(manuId) {

     var div = $("#rightcol");  


    div.fadeOut('slow',function() {          
        div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
                           $(this).fadeIn();                             

                       });

    });  

}

Now i want to Show a Loading Message till the div loads the contents from the server page

I tried this.But its not working.Can any one help me to debug this ? Thanks in advance

function ShowModels(manuId) {

     var div = $("#rightcol"); 
     var strLoadingMsg="<img src='loading.gif'/><h3>Loading...</h3>";
    div.fadeOut('slow',function() {
        div.load(strLoadingMsg,function(){

             div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
                           $(this).fadeIn();


                       });
         });
    });  

}

My ultimate requirement is to FadeOut the current content.Show the Loading message.Show the Data coming from server with a FadeIn effect


Solution

  • I have tested this and it looks like it should do what you want. Here is the function:

    function ShowModels(manuId){
         var div = $("#rightcol"); 
         var strLoadingMsg="<img src='loading.gif'/><h3>Loading...</h3>"; 
    
    
         div.fadeOut('slow',function() {  
         div.html(strLoadingMsg).show();       
             div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
    
                           $(this).hide().fadeIn();                             
    
                       });
    
         });
    

    }

    If you would like to see it in action go to: http://thetimbanks.com/demos/help/jqueryproblem-in-chaining-the-events/ and feel free to view the source and use it how you wish.

    In my example I just used test.php to post to, but it should still work for your page.