JQuery UI dialog ALWAYS loads the same page into a container element ? How can i solve it ?

Question

Hi,

I have a container and some actions according to

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

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

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

Notice i use a unique container to load any page. When i click an action, it triggers a click event

// 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

I think you'll have to approach things a bit differently. The dialog is initialized in your your add/view options. So, the javascript is parsed and initialized the first dialog and ignores the second because an instance already exists.

Initialize the dialog somewhere else, and load the html into the container instead, then trigger the dialog open.

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

and .dialog("open") the container after, or perhaps restructure your markup to make this more readable, such as:

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

Answer 2

If i insert close event in each dialog according to

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

It works fine!