刪除beforeClose事件處理程序-jQuery UI對話框

Question

我有一個jQuery UI對話框，里面有一個表單。 我正在嘗試實現一項功能，如果表單中的字段已被修改，我們將使用noty顯示確認消息

現在，與javaScript確認框不同，noty不會停止腳本執行。 因此，在對話框beforeClose事件中，我-

如果表單數據被修改 ，則顯示一個noty確認，然后返回false。 如果尚未修改表單數據， 則僅返回true。

一切都很好。 現在我們問用戶-

表格中的數據已被修改。 您確定要關閉嗎？

如果他單擊否 -我們只需關閉noty並使對話框保持打開狀態即可。 但是，如果他單擊yes ，我們將嘗試關閉對話框，該對話框再次觸發beforeClose事件處理程序，然后再次進入循環。

我試過在調用close事件之前在已轉換為對話框的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

您可以使用對話框窗口小部件的“選項”方法來更改或刪除beforeClose事件處理程序。

因此，當用戶單擊“是”時，可以通過執行以下操作關閉對話框：

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

這是一個顯示其工作方式的小提琴： http : //jsfiddle.net/BrDE7/1/

關於“ option”方法的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票證-http: //bugs.jqueryui.com/ticket/9943

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

Answer 4

例子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。 它允許您使用回調創建操作按鈕，因此代碼將相似。