Два разных диалоговых окна jQuery UI, основанные на одном и том же <div>

Question

Ну, у меня есть форма, которая появляется в модальном диалоге, когда пользователь нажимает на тот или иной элемент.В зависимости от того, что попало, поведение диалога должно немного измениться.Например, по умолчанию диалоговое окно должно иметь кнопки [OK] и [Отмена], а также кнопку закрытия [X] в правом верхнем углу.Но иногда я хочу, чтобы кнопки [X] и [Cancel] были скрыты, а escape - отключены.Идентификатор формы и набор полей остаются неизменными.

Я пробовал следующее:

    var dlg1 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    var dlg2 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    $("#button1").click( function() {
        dlg1
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

Теперь проблема заключается в том, если я нажму кнопку 1, чтобы показать dlg1, а затем закроюзатем нажмите кнопку 2, параметры не изменятся.В отображаемом диалоге все еще есть опции от dlg1.И наоборот, если dlg2 был показан первым, обработчик button1 не отменяет параметры диалога.Где я не прав?Заранее большое спасибо.

Поскольку не разрешено отвечать на собственные вопросы до истечения 8 часов, я редактирую вопрос для предоставления ответа:

ВсеХорошо, я понял это.В итоге я сделал следующее:

var dlg1 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    })
    }

    var dlg2 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });
    }

    $("#button1").click( function() {
        dlg1()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

Вот и все!Спасибо всем за вашу помощь.

Answer 1

(из памяти)

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

В следующий раз, когда вы вызываете диалоговое окно, он знает, что div с этим идентификатором был создан ранее, и просто устанавливает отображение на блокировку ...

или что-то в этом роде. Проще говоря, после того, как div загружен в виде диалога, он не перезагружается с каждым dialog.open, а просто делается видимым.

Answer 2

Я попробовал предложенные идеи, мне нужно было очистить диалог при закрытии, так как 2 разных диалога используют один и тот же div. Удаление всего div гарантирует, что 2-ой диалог на самом деле не первый, просто его снова показывают. Метод уничтожения в моем случае не помог.

close: function(ev, ui) {
    $(this).remove();
}

Я добавляю div к телу при инициализации диалога, это может не сработать без создания div для заполнения диалога на лету.

Это сработало для меня. Теперь я могу открывать разные диалоги с различным содержимым на одной странице, и предыдущий диалог не будет влиять на новый диалог.

Answer 3

Скорее всего, пользовательский интерфейс jQuery лениво загружает инициализацию диалога на dialog('open'), что означает, что первым вызывается тот, который установлен.

dialog('destroy') работает, но я предлагаю клонировать узел для второго диалога. Смотри http://api.jquery.com/clone/.

Answer 4

попробуйте использовать метод .dialog ("destroy") перед каждым вызовом.Это даст вам новый старт.

Answer 5

Когда вы закрываете свои диалоги, попробуйте использовать метод destroy.

http://jqueryui.com/demos/dialog/#method-destroy