UI Dialog модальные окна работают как модальные окна при втором нажатии - PullRequest
Новая
       19

UI Dialog модальные окна работают как модальные окна при втором нажатии

1 голос
/ 20 февраля 2012

У меня проблема с диалоговым окном Jquery UI, когда я нажимаю кнопку в первый раз, она показывает диалоговое окно, но не в модальном диалоге, но когда вы щелкаете по нему во второй раз, оно отображается корректно как модальное диалоговое окно 

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");

    $( "#dialog" ).dialog({
        height: 140,
        title:"Title",
        modal: true
    });


    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;
});

Вот код события нажатия кнопки 

<button class="ajax">open dialog</button>

см. Эту ссылку для проверки кода выше

http://jsfiddle.net/jRPfu/13/

1 Ответ

1 голос
/ 21 февраля 2012

Вот как я бы это сделал.

  1. Вы объявляете переменную dialog, поэтому используйте ее впоследствии

  2. Проверьте напрямую, еслиЭлемент #dialog был найден с dialog.length.Если она пуста, создайте вашу разметку

  3. Инициализируйте ваш диалог с опцией autoOpen: false.Таким образом, диалог инициализируется раз и навсегда, но он останется скрытым.

  4. В ваших обратных вызовах ajax вызовите метод open, чтобы отобразить диалог с dialog.dialog('open').В качестве примечания, кажется более логичным установить содержимое диалогового окна и затем открыть его.

Дополнительная информация:

Вот модифицированный код: 

var dialog = $("#dialog");

if (dialog.length == 0) {

    dialog = $('<div id="dialog"></div>').appendTo('body');

    dialog.dialog({
        height: 140,
        title: "Title",
        modal: true,
        autoOpen: false
    });

}

$.ajax({
    url: url,
    ...
    success: function(data, textStatus, jqXHR) {
        dialog.html(data).dialog('open');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        dialog.html("An error occured...").dialog('open');
    }
});

DEMO

...