Диалог JQuery UI ВСЕГДА загружает одну и ту же страницу в элемент контейнера? Как я могу решить это?

Question

У меня есть контейнер и некоторые действия в соответствии с

<div id="container"></div>

<a href="#" class="action" id="add">Add user</a>

<a href="#" class="action" id="view">View user</a>

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

// dialog settings
var settings = {
    add:{
        buttons:{
            "Add user":function() {
                // some action
            }
        },
        open:function(e, ui) {
            $(this).load("/add.xhtml");
        }
    },
    view:{
        buttons:{
            "View user":function() {
                // some action
            }
        },
        open:function(e, ui) {
            $(this).load("/view.xhtml");
        }
    }
};


$(".action").click(
    function(e) {
        e.preventDefault();

        $("#container").dialog(settings[$(this).attr("id")].dialog());
    }
);

Answer 1

Я думаю, вам придется подойти к чему-то немного по-другому. Диалог инициализируется в ваших опциях добавления / просмотра. Итак, javascript анализируется и инициализируется первый диалог и игнорирует второй, потому что экземпляр уже существует.

Инициализируйте диалог где-нибудь еще, загрузите html в контейнер, а затем откройте диалоговое окно.

var dialog = {    
    add: $("#container").load("/add.xhtml"),    
    view: $("#container").load("/view.xhtml")
};

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

$("#container").load("/" + $(this).attr("id") + ".xhtml").dialog("open");

Answer 2

Если я вставляю событие закрытия в каждый диалог в соответствии с

close:function(e, ui) {
    $(this).dialog("destroy");
}

Работает отлично!