Question

我有一个jQuery UI对话框，里面有一个表单。我正在尝试实现一项功能，如果表单中的字段已被修改，我们将使用noty

显示确认消息

现在，与javaScript确认框不同，noty不会停止脚本执行。所以，在对话框beforeClose事件中，我是 -

如果表单数据被修改，则显示一个noty确认，然后返回false。如果表单数据尚未修改，则返回true 。

一切运转良好。现在我们问用户 -

表格中的数据已被修改。你确定要关闭吗？

如果他点击否 - 我们只需关闭noty并保持对话框打开。但如果他点击是，我们会尝试关闭对话框，再次触发beforeClose事件处理程序，然后我们再次进入循环。

我已经尝试在调用close事件之前调用已转换为对话框的.off上的div，但这似乎并没有删除点击。

这是一个简单的伪代码来解释这个问题 -

DialogCloseEvent() {
    if data has been modified { 
        Show noty {
            // IMPORTANT - This is executed after return false.
            in noty user clicks NO - do not close dialog box {
                close noty and done
            } 
            in noty user clicks YES - close the dialog box {
                // This calls the DialogCloseEvent again.   
                call the close method of the dialog box.            
                close noty
            }
        }
        return false
    }   
    no it has not been modifed {
        // Closes the dialog without calling the event again
        return true;
    }
}

Answer 1

扩展您的伪代码，您可以添加一个标志来强制关闭对话框：

var forceClose = false;

DialogCloseEvent() {
    if data has been modified and !forceClose  { 
        Show noty {
            // IMPORTANT - This is executed after return false.
            in noty user clicks NO - do not close dialog box {
                close noty and done
            } 
            in noty user clicks YES{ 

                forceClose = true;

                - close the dialog box {
                    // This calls the DialogCloseEvent again.   
                    call the close method of the dialog box.            
                    close noty
                }
            }
        }
        return false
    }   
    no it has not been modifed {
        // Closes the dialog without calling the event again
        return true;
    }
}

使用代码更新

var forceClose = false;

$("#dialog").dialog({
    open: function (event, ui) {
        forceClose = false; //reset the flag each time
    },
    beforeClose: function (event, ui) {
        if(forceClose){
            return true;
        }

        //your dialog close event
        //set the flag to true when you want to close the jqueryui dialog

    }
});

Answer 2

您可以使用对话框小部件＆＃34;选项＆＃34;更改或删除beforeClose事件处理程序的方法。

因此，当用户点击“是”时，您可以通过执行以下内容来关闭对话框：

$('#myDialog')
  .dialog('option', 'beforeClose', function() {})
  .dialog('close');

这是一个显示其工作原理的小提琴：http://jsfiddle.net/BrDE7/1/

关于＆＃34;选项＆＃34的Jquery UI文档;方法：http://api.jqueryui.com/dialog/#method-option

Answer 3

根据Jquery UI对话框的close API代码，无法在不触发事件的情况下强制关闭对话框。理想情况下，应该有一个只执行功能而不触发事件的API。我试过一种方法，通过现在复制方法来启用它。最好的方式作为API本身的补充。所以改变就是这样的，

// code from existing
if(!forceClose && this._trigger("beforeClose") === false){
    return;
}
// continue with existing

在这里有一个小提琴http://jsfiddle.net/Lj3Nk/1/

现在要向jquery ui提交功能/拉取请求。完成后将更新详细信息。同时，让我知道这是否有帮助。

<强>更新

Jquery ui ticket - http://bugs.jqueryui.com/ticket/9943

提取请求 - https://github.com/jquery/jquery-ui/pull/1218

Answer 4

示例1
基于flag approach：

var notyStatus = null;
$("#dialog").dialog({
    beforeClose: function (event, ui) {
        // possible values for notyStatus are
        // null: preventDefault and show the warning
        // else: do nothing and let the dialog close
        if (notyStatus === null) {
            event.preventDefault();
            $('<p title="Replace me with noty">Close the dialog?</p>').dialog({
                modal: true,
                buttons: {
                    "Close": function () {
                        notyStatus = true;
                        $(this).dialog("close");
                        $("#dialog").dialog("close");
                    },
                    "Keep Open": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    }
});

Demo 1

示例2
删除beforeClose事件处理程序。您可以使用.dialog("option", "beforeClose")来获取，设置或取消设置事件处理程序。代码如下所示：

$("#dialog").dialog({
    beforeClose: function (event, ui) {
        event.preventDefault();
        $('<p title="Replace me with noty">Close the dialog?</p>').dialog({
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                    $("#dialog")
                        .dialog("option", "beforeClose", null)
                        .dialog("close");
                },
                "Keep Open": function () {
                    $(this).dialog("close");
                }
            }
        });
    }
});

Demo 2

在这两个示例中，用noty替换内部jQuery UI确认对话框代码。它允许您使用回调创建操作按钮，因此代码将类似。

删除beforeClose事件处理程序 - jQuery UI Dialog

4 个答案: