Диалог 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 Right Единственное, на что вы должны обратить внимание при этом, это то, что перед появлением загружаемого изображения может быть небольшая задержка, поскольку оно загружается только в то время, когда оно необходимо. - person Jack Murdoch; 08.07.2011
comment
Старая шишка; Я считаю, что замена моей кнопки отправки на это довольно интуитивно понятна с точки зрения конечных пользователей. - person Stachu; 02.01.2014