1

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

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

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

一切运作良好。现在我们问用户——

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

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

.off在调用 close 事件之前，我尝试调用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;
    }
}
4

4 回答 4

5

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

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

    }
});
于 2014-03-19T09:38:47.540 回答
2

根据closeJquery UI 对话框的 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

于 2014-03-30T20:43:57.187 回答
2

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

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

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

这是一个展示它是如何工作的小提琴：http: //jsfiddle.net/BrDE7/1/

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

于 2014-03-28T23:40:33.907 回答
2

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

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

于 2014-04-01T09:05:05.497 回答