JQuery-UI проблема с модальным диалогом из AJAX

Question

У меня есть следующие настройки: index.html с <<em> div id = "container "> <<em> / div >, используя метод привязки. Я загружаю различное html-содержимое в этот контейнер.
Мой контент содержит div для модального диалога "dialog-form", и я инициализирую его пользовательской функцией из javascript, включенной в index.html, при успешной загрузке ajax с использованием обратного вызова

$.get("callback.php",query, function(data){
        $("#container").html(data);
        initPos(); // here we run javascript to initialise modal dialog
    });

Все в порядке, пока пользователь не щелкнет другое меню (мы загружаем другое содержимое) и после этого снова щелкнет меню с этим модальным диалогом, поэтому страница снова загружается, мы снова вызываем скрипт (все в порядке), открывается диалоговое окно, отправляется информация из диалогового окна на сервер и на успешном sumbit я хочу закрыть диалог с

('#dialog-form').dialog('close');

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

div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"

Как это убрать, когда пользователь выбирает другой пункт меню? Как правильно справиться с этим? Есть ли способ закрыть несколько диалогов с одинаковым именем?

Answer 1

Разобрался. Чтобы удалить эти DIV из тела - перед initPos () в обратный вызов ajax вставьте функцию InitializeDialog ()

function InitializeDialog() {

    $("div").remove(".ui-dialog");
    $("div").remove("#dialog-form");
}

В общем Когда ваш диалог Jquery UI возвращается вместе с тегом <script> в ответ на вызов ajax. В этой ситуации вы должны удалить диалоговое окно div, как указано выше, а затем сделать ajax-вызов.

Надеюсь, это поможет!