如何讓JQuery語句等待完成，然后再繼續？>

Question

首先，我是Javascript / Jquery的新手，所以這可能是一個愚蠢的問題...

我正在使用JQuery UI集合中的對話框。 我有一個按鈕，單擊該按鈕時會顯示一個確認框或一個警報框。 我的代碼如下

            function checkfn() {

            if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

                var dialogResult = false;

                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        Continue: function () {
                            dialogResult = true;
                            $(this).dialog("close");

                        },
                        Cancel: function () {
                            $(this).dialog("close").slideUp();
                        }
                    }
                });

                // alert just debug code!
                alert(dialogResult);
                return dialogResult;

            }
            else {
                $("#dialog-HomeInstitutionPrompt").dialog({
                    height: 140,
                    modal: true
                });

            } 
        }

我的問題是在確認部分，似乎確認框不是在等待我點擊繼續或取消-它只是直接進入警報部分並返回dialogResult = false。

在我運行$（'＃dialog-confirm'）命令之后，是否可以停止執行？

或者，是否可以在Continue函數中為checkfn（）函數返回true？ 這樣，我根本就不需要dialogResult變量？

Answer 1

我以前沒有在jQuery UI中使用.dialog，但是，通常在jQuery中，函數都是異步運行的。 這意味着您需要將要運行的代碼放入Continue函數中。

一種可能性是將成功/取消函數發送到您將要從繼續和取消函數調用的checkfn中。

function checkfn(success, cancel) {

if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

    var dialogResult = false;

    $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            Continue: function () {
                if(success) success();
                $(this).dialog("close");

            },
            Cancel: function () {
                if(cancel) cancel();
                $(this).dialog("close").slideUp();
            }
        }
    });
}

您可以這樣調用函數：

checkfn(function () {
    alert('success!');
}, function () {
    alert('failure!');
});

Answer 2

只需將您要執行的所有操作放入“繼續”和“取消”按鈕定義中即可。 因此，您將不需要dialogResult，並且在需要時會發出警報。

if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

                var dialogResult = false;

                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        Continue: function () {
                            alert('Dialog result is true. I can do whatever I want here');
                            $(this).dialog("close");

                        },
                        Cancel: function () {
                            alert('Cancel is clicked. I should go on my life');
                            $(this).dialog("close").slideUp();
                        }
                    }
                });
            }
            else {
                $("#dialog-HomeInstitutionPrompt").dialog({
                    height: 140,
                    modal: true
                });
            } 

-您無法為函數返回值，因為在函數初始化之后，代碼將繼續執行。 您需要填寫繼續按鈕定義。

Answer 3

這也是我在開始時也遇到的困難，代碼無法在頁面上讀取時運行。 調用對話框函數時，它將異步執行。 繼續和取消功能綁定到按鈕上的單擊動作，而對話框功能下方的代碼無需等待事件就可以運行。

長話短說，結果需要在取消並繼續回調中發生。

問題是，當您實際上應該將結果函數傳遞給它時，您試圖返回一個布爾值。 通常，jquery和javascript中的很多東西都是以這種方式工作的。 值得慶幸的是，該語言提供了以這種方式進行編程的能力。

    function checkfn( resultfn(boolval) ) {

    if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {

        var dialogResult = false;

        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                Continue: function () {
                    resultfn.call( this, true );
                    $(this).dialog("close");

                },
                Cancel: function () {
                    resultfn.call( this, false );
                    $(this).dialog("close").slideUp();
                }
            }
        });

}

將if語句放在“ resultfn”中

Answer 4

我有一個類似的令人沮喪的問題，在用戶有機會選擇是或否之前，jQuery對話框將提交一個表單。

HTML示例：

<form id="myForm" method="POST" action="/Where/To/Go">
    <input type="submit" value="Submit" onclick="submitForm()"/>
</form>

和jQuery：

function submitForm() {
    $('<div title="Submit Form>Are you sure you wish to submit the form?</div>').dialog({
        modal: true,
        buttons: [
            {
                text: "Yes",
                click: function () {
                    $('#myForm').submit();
                    $(this).dialog("close");
                }
            }, {
                text: "No",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });
}

為了解決這個問題，我將按鈕從submit類型更改為button類型，從而停止了button提交並同時觸發jQuery對話框：

    <input type="button" value="Submit" onclick="submitForm()"/>