Диалогов прозорец на Jquery, показващ анимиран gif при извличане на ajax

Зареждам диалогов прозорец с помощта на ajax повикване. Бих искал да добавя анимиран gif към диалоговия прозорец, докато тече извличането на ajax, и да изчезне, когато извличането приключи.

Основните ми функции, които задават и отварят диалогов прозорец, са следните

    function showDetail(sipId) {
    ShowWOrderRows(sipId);
    $("#Container").data('title.dialog', 'Details of Order ' + sipId); 
    $("#Container").dialog("open");
    return false;
    }
$(function () {    
            $("#Container").dialog({
                autoOpen: false,
                modal: true,
                height: 300,
                width: 650
            });    
        });

и във функцията ShowWOrderRows извличам данни с $.ajax({ //some options });

и попълване на тези данни до $('#Container').

Какъв е най-лесният начин да направите това?

Благодаря предварително.


jquery jquery-ui jquery-ui-dialog
person Adam Right    schedule 08.07.2011    source източник
comment
възможен дубликат на jQuery моля изчакайте, зареждане... анимация?   -  person trejder    schedule 10.12.2014

Отговори (3)


arrow_upward
2
arrow_downward

Можете да прикачите събитията ajaxStart и ajaxStop към div, съдържащ зареждащото изображение.

$('#loadingDiv')
    .hide() //hide the image initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
person Jack Murdoch    schedule 08.07.2011
comment
документацията казва, че ajaxStart и stop трябва да се прикачват само към document от версия 1.8 - person JP Hellemons; 11.10.2013

arrow_upward
0
arrow_downward

При събитие, което задейства Ajax заявката, там показвате div с вашия зареждащ се gif, след което във функцията за обратно извикване за успех на данните на вашето Ajax повикване, вие скривате зареждащия се div. Добри връзки тук:

Как мога да създам анимация Моля, изчакайте, зареждане... с помощта на jQuery?

person ElonU Webdev    schedule 08.07.2011

arrow_upward

arrow_downward

person    schedule
comment
@Adam Правилно Единственото нещо, за което ще искате да внимавате, когато правите това, е, че може да има леко забавяне, преди да се появи изображението за зареждане, тъй като то се изтегля само по същото време, когато е необходимо. - person Jack Murdoch; 08.07.2011
comment
Стара подутина; Намирам, че замяната на моя бутон за изпращане с това е доста интуитивно от гледна точка на крайните потребители. - person Stachu; 02.01.2014