删除 beforeClose 事件处理程序 - jQuery UI 对话框

Question

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

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

如果表单数据被修改，则显示通知确认，然后返回 false。 如果表单数据未被修改，则简单地返回 true。

一切正常。现在我们询问用户 -

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

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

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

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

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

根据 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 票证 - http://bugs.jqueryui.com/ticket/9943

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

Answer 3

示例 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

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

Answer 4

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

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

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

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

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