Запуск перерисовки jQuery после получения данных с помощью Ajax

Всем доброго времени суток,

Давний слушатель, первый постер...

У меня есть клиент, которому обещали, казалось бы, очень сложную функциональность. Они хотят загрузить содержимое 3 отдельных страниц на одну после того, как посетитель их сайта успешно войдет в свою учетную запись. Они хотят, чтобы это произошло без обновления страницы. Ajax является решением. Я, однако, не имел опыта работы с Ajax.

У меня проблемы с выяснением того, как определить, когда команда $.get (с помощью команд jQuery Ajax) закончила загрузку своего содержимого. Мой подход состоит в том, чтобы, после успешного входа в систему, пойти и извлечь 3 отдельные страницы, загрузить их содержимое XHTML в переменные и перерисовать страницы. Ниже вы увидите мой псевдокод. Я использую "XXItemXX" для замены реальных путей. Каждая полученная страница, которую я пытаюсь получить, имеет div с классом "content", окружающим данные, которые я хочу получить. XHTML выглядит так:

<html>
    <head>
        <title>Page Name</title>
    </head>
    <body>
        <div id="header">...</div>
        <div class="content">
        .
        .
        .
        </div>
        <div id="footer">...</div>
    </body>
</html>

Код JQuery, который я построил следующим образом. Я могу получить отправленную форму и даже вернуть содержимое с помощью различных команд.get. Проблема в том, что я не могу, кажется, цепляться за вещи, как обычно. Я изо всех сил пытаюсь выяснить, как запустить команды jQuery только для рисования страницы после того, как все 3 были успешно получены. Боюсь, мой самый большой камень преткновения - как сформулировать это при поиске в Google, чтобы увидеть, как другие справились с этой проблемой. Я не уверен, как именно описать то, что я пытаюсь выполнить, не более чем в 10 словах или способом, который на самом деле вернет мне необходимую информацию.

Может кто-нибудь помочь с этим? Боюсь, у меня слишком мало времени и слишком много, чтобы учиться.

<script type="text/javascript">
$('XXLoginFormXX').submit(function () {
    $.ajax({  
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        beforeSend: function() {
            $('<div class="loading">Loading...</div>').insertBefore('XXLoginFormXX').css('position','absolute');
        },
        success: function(data) {  
            // On successful login, draw page. 
            $('.loading').fadeOut('slow');
            var dr_editProfileXHTML, dr_accountOrderListXHTML, dr_wishListsXHTML;
            $.get('XXPathToEditProfilePageXX', function(data1){
                var dr_editProfileXHTML = $('div.content', data1);
            });
            $.get('XXPathToAccountOrderListPageXX', function(data2){
                var dr_accountOrderListXHTML = $('div.content',data2);
            });
            $.get('XXPathToWishListsPageXX', function(data3){
                var dr_wishListsXHTML = $('div.content',data3);
            });
            $('div.content').fadeOut(function(){
                $(this).html(dr_editProfileXHTML);
                $('XXEditProfileXHTMLXX').before(dr_accountOrderListXHTML);
                $('XXEditProfileXHTMLXX').before(dr_wishListsXHTML);
            }).fadeIn();
        }
    }); 
    return false;
});
</script>

Большое спасибо за ваше время, помощь и внимание.

С уважением, Сильван012

Источник

2 ответа

Если ваша проблема состоит в том, чтобы ждать, когда все 3 запроса вернулись, то:

  1. храните результаты в переменных, расположенных немного выше, чтобы каждый из них мог получить к ним доступ
  2. добавить переменную drawing в том же объеме
  3. в каждом из обратных вызовов проверьте, не являются ли все 3 переменные ненулевыми, и drawing ложно
  4. если это так, то установите drawing чтобы правда, и делать работу
Источник

Поработав над этим с щедрой помощью людей, я верю, что получил это. Все мои благодарности Дэйву Бриану, который учил меня о. Когда и. Затем.

Ниже приведен псевдокод, который я придумал. Кажется, это работает! Конечно, предстоит много работы по очистке, но все три страницы сейчас загружаются! Whoot!

Что вы думаете о моем решении?

<script type="text/javascript">
$('XXLoginFormXX').submit(function () {
    $.ajax({  
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        beforeSend: function() {
            $('<div class="loading">Loading...</div>').insertBefore('XXLoginFormXX').css('position','absolute');
        },
        success: function(data) {  
            // On successful login, draw page. 
            var Page01XHTML;
            var Page02XHTML;
            var Page03XHTML;

            $.when(
                $.get('XXPathToEditProfilePageXX', function(data1){
                    var Page02XHTML = $('div.content', data1);
                }),
                $.get('XXPathToAccountOrderListPageXX', function(data2){
                    var Page03XHTML = $('div.content',data2);
                }), 
                $.get('XXPathToWishListsPageXX', function(data3){
                    var Page01XHTML = $('div.content',data3);
                })
            ).then(function(Page02XHTML,Page03XHTML,Page01XHTML){
                $('.loading').fadeOut('slow');
                $('div.content').fadeOut(function(){
                    $(this).attr('id','MyAccount').html(' ' + Page01XHTML + Page03XHTML + Page02XHTML + ' ').parents('body').find('.content').each(function(){
                        dr_thisID = $(this).attr('id');
                        if (dr_thisID != 'MyAccount') {
                            $(this).appendTo($('div#MyAccount'));
                        }
                    }).parents('div#MyAccount').children().each(function(){
                        dr_thisClass = $(this).attr('class');
                        if (dr_thisClass != 'content') {
                            $(this).remove();
                        }
                    });
                }).fadeIn();
            });
        }
    }); 
    return false;
});
</script>
Источник
Другие вопросы по тегам