移除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 ticket - http://bugs.jqueryui.com/ticket/9943

Pull request - https://github.com/jquery/jquery-ui/pull/1218

Answer 3

示例1
基于标志方法:

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

演示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");
                }
            }
        });
    }
});

演示2

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

Answer 4

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

所以当用户点击'yes'时，你可以通过执行:

来关闭对话框。

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

这里有一个小提琴，显示它是如何工作的:http://jsfiddle.net/BrDE7/1/

Jquery UI文档中关于"option"方法的说明:http://api.jqueryui.com/dialog/#method-option