如何从对话框代码内部关闭 jquery ui 对话框？

发布于 2024-09-25 17:26:46 字数 1542 浏览 5 评论 0原文

我在应用程序中使用多个 jquery ui 对话框来收集用户的输入并进行 CRUD 操作。当在页面中我需要一个对话框时，我执行以下步骤：

首先定义初始化对话框所需的最少标记和代码

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

，当 DOM 准备好时，

$("#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" }
});

然后在需要时使用 ajax 加载对话框中的内容调用，像这样

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

和这样

$("#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');
        }
    });
}

ajax 调用返回一个强类型视图，它将显示在对话框内，甚至可以动态调整其大小。强类型视图有一些按钮，这些按钮依次执行其他 ajax 调用（例如验证并保留在数据库上的控制器操作）。这些调用通常返回将添加到对话框 DIV 中的 HTML 代码。

现在我的问题是：如何关闭对话框？我可以通过单击对话框右上角的“X”按钮或按 ESC 键来完成此操作，但我想通过单击强类型视图内的按钮来完成此操作。

使用此类代码

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

但是，我不希望在本身未定义 #dialogPanel DIV 的强类型视图中

。什么可能是一个好的解决方案？

原文

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