Цепочка событий - PullRequest
Новая
       15

Цепочка событий

0 голосов
/ 06 июня 2009

У меня есть следующая функция javascript, которая загружает данные со страницы сервера в div Это работает нормально с эффектами FadeIn / FadeOut 

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();                             

                       });

    });

}

Теперь я хочу показать загрузочное сообщение, пока div не загрузит содержимое со страницы сервера

Я попробовал это. Но это не работает. Может ли кто-нибудь помочь мне отладить это? Заранее спасибо 

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();


                       });
         });
    });

}

Мое конечное требование - FadeOut текущего содержимого. Показать сообщение загрузки. Показать данные, поступающие с сервера с эффектом FadeIn

Ответы [ 3 ]

2 голосов
/ 11 июня 2009

Я проверил это, и похоже, что он должен делать то, что вы хотите. Вот функция: 

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();                             

                   });

     });

}

Если вы хотите увидеть его в действии, перейдите по адресу: http://thetimbanks.com/demos/help/jqueryproblem-in-chaining-the-events/ и не стесняйтесь просматривать источник и использовать его по своему усмотрению.

В моем примере я просто использовал test.php для публикации, но он все равно должен работать для вашей страницы.

1 голос
/ 06 июня 2009

Я попробую свой снимок, чтобы иметь возможность контролировать процесс загрузки, гораздо лучше использовать явный вызов AJAX и сделать что-то похожее на это: 

 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();                             
                   });

});
1 голос
/ 06 июня 2009

Я не проверял это, но почему бы просто не показать / скрыть GIF-анимацию? FadIn перед загрузкой и fadeOut после загрузки, но перед отображением содержимого. 

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: Замените эту GIF-анимацию текстом, так как это был ваш вопрос;)

...