Как показать панель загрузки в диалоге jquery ui? - PullRequest
Новая
       13

Как показать панель загрузки в диалоге jquery ui?

3 голосов
/ 02 февраля 2011

Прямо сейчас, я использую эту функцию для загрузки контента с другой страницы в диалоге пользовательского интерфейса jquery: 

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.load(uri, function() {
        div.dialog({
            title: title,
            width: width,
            height: height,
            position: 'middle',
            resizable: false,
            buttons: buttonsArray
        });
    });
}

Например, вот так: 

$('a.dictionary').click(function() {
    openDialogByUri($otherDialogContainer, '/test.php', 'Dialog title', 600, 400, 
        {
            'Close': function() {
                $otherDialogContainer.dialog('close');
            }
        }
    );
    return false;
});

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

Как мне изменить эту функцию, чтобы она работала так:

Когда пользователь нажимает на ссылку, вызывающую указанную выше функцию, диалоговое окно открывается немедленно. Внутри диалога есть какая-то панель загрузки или похожее изображение, которое указывает на то, что объект загружается. После загрузки содержимого вставьте его в диалоговое окно.

Ответы [ 2 ]

0 голосов
/ 19 апреля 2013 
            function showUrlInDialog(url) {
            var id = '<%= ResolveUrl("~/connecting.gif")%>';
            var tag = $("<div><div id='img' align='center'><img src='" + id + "' /></div></div>");
            tag.dialog({ show: 'fade', hide: 'fade', modal: false, closeOnEscape: false, draggable: false, autoOpen: false,
                resizable: false, close: function (event, ui) {
                    $(this).dialog('destroy');
                    $(this).dialog('close');
                    $(this).remove();
                }
            }).dialog('open');
            $.ajax({
                url: url,
                success: function (data) {
                    tag.append(data);
                    $("#img").hide();
                },
                error: function (data) {
                    $("#img").hide();
                }
            });
        }
0 голосов
/ 02 февраля 2011

Ну, это похоже на работу: 

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.html("<div style=\"height: "+(height-80)+
             "px; background: url('/images/ajax-loader.gif') center center no-repeat;\"></div>");
    div.dialog({
        title: title,
        width: width,
        height: height,
        position: 'middle',
        resizable: false,
        buttons: buttonsArray
    });
    $.ajax({
        url: uri,
        success: function(response) {
            div.html(response);
        },
        error: function(response) {
            alert(response);
        }
    });
}
...