Jquery Dialog, показывающий анимированный GIF при загрузке AJAX - PullRequest
Новая
       6

Jquery Dialog, показывающий анимированный GIF при загрузке AJAX

1 голос
/ 08 июля 2011

Я загружаю диалоговое окно, используя вызов ajax. Я хотел бы добавить анимированный GIF для диалогового окна во время работы ajax fetch и это уйдет, когда выборка будет завершена.

Мои основные функции, которые устанавливают и открывают диалог, следующие: 

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

Какой самый простой способ сделать это?

Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 08 июля 2011

Вы можете прикрепить события ajaxStart и ajaxStop к div, содержащему загрузочное изображение. 

$('#loadingDiv')
    .hide() //hide the image initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
1 голос
/ 08 июля 2011 
$('<img src="your gif" />').appendTo("#Container");

$.ajax({
  url: .....
  context: .....
  success: function(data){
    $("#Container").find('img').remove();
  }
});
0 голосов
/ 08 июля 2011

В случае запуска запроса Ajax, именно здесь вы показываете div с загрузочным gif, затем в функции обратного вызова data success вашего Ajax-вызова вы скрываете загрузочный div.Хорошие ссылки здесь:

Как создать анимацию «Пожалуйста, подождите, идет загрузка ...» с помощью jQuery?

...