How to create a modal JQuery UI dialog from a Html page fragment fetched by $.get()

Question

Hello,

with the below code, I'm able to add a page fragment to an other page. The page contains a form to be posted to a certain action method.

$("#ul-menu a").click(function () {
   $.get($(this).attr("href"), function (response) {
        $("#dialog-div div").replaceWith($(response));
      });
    return false;
 })

Instead of having the form anywhere in the page, I'd like to get it as a modal JQueryUI dialog.

How can I do that.

Thanks for helping.

Answer 1

You don't even need to insert the response into the page.

You can just do this:

var myDialog = $(response).dialog();

EDIT

Not the above snippet won't create a modal dialog, I assumed you know you need to pass in { modal: true } as part of your configuration.

Answer 2

This will work for you. Also, I've added a better method of preventing the original click. Instead of returning false, which kills all bubbling, you should use event.preventDefault();

$("#ul-menu a").click(function (event) {
    event.preventDefault();
    $.get($(this).attr("href"), function (response) {
        $(response).dialog({ modal : true });
    });
})