Chaining the events

Question

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

Answer 1

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.