Question

I use several jquery ui dialogs in my application to collect input from users and for CRUD operations. When in a page I need a dialog I do the following steps:

First I define the minimum markup and code necessary to initialize the dialog like this

<div id="dialogPanel" style="display:none" title=""></div>

and, when the DOM is ready,

$("#dialogPanel").dialog({
    autoOpen: false, hide: 'slide', show: 'bounce', resizable: false, 
    position: 'center', stack: true, height: 'auto', width: 'auto', 
    modal: true, overlay: { opacity: 0.5, background: "white" }
});

Then I load content in the dialog when I need it using ajax calls, like this

<button id="addCustomer">Add Customer</button>

and this

$("#addCustomer").button().click(function(event) {
    event.preventDefault();
    loadDialog("/Customer/Create", "", "Add New Customer");
});

function loadDialog(action, id, title) {
    $("#dialogPanel").dialog("option", "title", title);
    if (id != "") 
        action = action + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: action,
        data: {},
        success: function(response) {
            $("#dialogPanel").html('').html(response).dialog('open');
        }
    });
}

The ajax call returns a strong typed view that will show inside the dialog and even resize it dinamically. The strong typed view has some buttons that, in turns, does other ajax calls (for example to the controller action that validate and persist on the database). These calls usually returns back HTML code that will be added to the dialog DIV.

Now my question is: How do I close the dialog? I can do it by clicking the “X” button on top right corner of the dialog or by pressing the ESC key but I would like to do it as a consequence of the click to the button that is inside the strong typed view .

However I do not wish to use this kind of code

$("#dialogPanel").dialog('close');

inside a strong typed view that does not defines the #dialogPanel DIV in itself.

What could be a good solution?

Answer 1

Create a closeDialog function in the main form, and call that function from within the dialog. Then any other page that hosts the dialog also needs to define a “closeDialog” function.

Also, you could pass a delegate pointing to the closeDialog function to separate things further.