jQuery:Problem in 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 haven't tested this, but why not just show / hide a gif animation? FadIn befor load, and fadeOut after load, but before showing the content.

var div = $("#rightcol");  


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

                   });

});

Edit: Replace that GIF animation with text, since that was your question ;)

Answer 2

I'll try my shot, in order to be able to control the loading process it's much better to use the explicit AJAX call and do something similar to this:

 var div = $("#rightcol");  


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

});

Answer 3

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.