JQuery UI диалог для модальных окон Ajax - PullRequest
Новая
       8

JQuery UI диалог для модальных окон Ajax

0 голосов
/ 05 сентября 2011

Я пытаюсь создать несколько модальных окон, которые загружают свой контент динамически, используя AJAX с виджетом диалога jQuery UI.Идея состоит в том, что диалог будет существовать ТОЛЬКО на странице, когда пользователь запрашивает что-то, а затем снова удаляется, когда пользователь нажимает кнопку закрытия.Однако с моим текущим кодом у меня есть две проблемы: 1.) диалоговое окно существует на странице, прежде чем его запрашивают из того, что я могу сказать 2.) когда пользователь закрывает модальное окно, его нельзя открыть снова, пока он не обновит страницу.

В моем приложении есть следующий код: 

$('.ajax').live('click', function()
        {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0)
            {
                dialog = $('<div id="dialog"></div>').appendTo('body');
            }
            dialog.load(
                    url,
                    {},
                    function(responseText, textStatus, XMLHttpRequest)
                    {
                        dialog.dialog();
                    }
                );
            return false;
        });

Любая помощь будет принята с благодарностью.Спасибо

1 Ответ

2 голосов
/ 05 сентября 2011

Вот код, который вам нужен, или протестируйте его там: демо 

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");
    if ($("#dialog").length == 0)
    {
        dialog = $('<div id="dialog"></div>').appendTo('body');
    }
    $.ajax(
        {
            url: url,
            beforeSend: function (jqXHR, settings)
            {
                //show an animated gif
            },
            complete: function (jqXHR, textStatus)
            {
                //hide the animated gif
            },
            success: function (data, textStatus, jqXHR)
            {
                dialog.dialog().html(data);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                dialog.dialog().html("An error occured...");
            }
        });

    return false;
});
...