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
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.