在asp.net中創建多個Jquery對話框

Question

我正在嘗試創建多個對話框以及一些我無法理解如何創建這些對話框的方法。

每個對話框都有DIV's ，其中每個動作都有一條消息。 基本上，如果用戶選中CheckBox則出現對話框，提示您要確認此操作。 一段時間后，如果用戶再次取消選中CheckBox則將顯示另一個對話框，顯示diff消息。 請幫我這個。

這是我到目前為止所得到的。

===============

的HTML

<div id="dialog-isReceived" title="Mark as Received?">
    Are you sure you want to mark this order as "Received"? <br />
    The customer will receive an email confirming their order is ready for collection.
</div>
<div id="dialog-notReceived" title="Mark as Not Received?">
    Are you sure you want to mark this order as "Not Received"? <br />
</div>

---

jQuery的

var isReceivedCheckBox = $('.isReceivedCheckBox input[type=checkbox]');
var dialogId; //trying to pass the Id of the div dynamically BUT not working 
var result;
$(document).ready(function () {
$(dialogId).dialog(
  {
        autoOpen: false,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
              "Confirm": function () {
                    result = true;
              },
              Cancel: function () {
                    result = false;
                    $(this).dialog("close");
              }
        },
  });
});

=====================

我要執行的代碼

$(document).on("change",isReceivedCheckBox, function () {
var checked = $(this).is(':checked');
if (checked) {
  dialogId = "'#dialog-isReceived'"; //setting the DIV ID here and hoping that dialog will appears.
  $(dialogId).dialog('open');
  if(!result)
        $(this).attr("checked", false); // if user clicks cancel on dialog then do not check the checkbox
} else {
    dialogId = "'#dialog-notReceived'";
    $(dialogId).dialog('open');
  if(!result)
        $(this).attr("checked", true); //if user clicks cancel on dialog then do not uncheck the checkbox because it was checked previously
}
});

這里的問題是對話框永遠不會出現，因為頁面加載時所有我的div都可見，因為我無法在頁面加載時設置dialogID變量。 我也有至少5個對話框在此頁面上執行相同的功能。 如果您可以提出更好的方法或告訴我在這里做錯了什么，那將是很棒的，並且會受到贊賞。

謝謝，米蘭P

Answer 1

您的方法的另一個可能的問題是jQuery對話框是異步的，這意味着條件

if(!result)

將在您的用戶有時間確認或取消對話框之前進行評估。 如果您想要模仿javascript的行為，請使用對話框進行確認，則需要使用jQuery Deferred對象。 另外，我建議根據需要創建和銷毀對話框，例如：

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        autoOpen: true,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
            'Confirm': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: function () {
            if (def.state() === "pending") {
                def.reject(); // Make sure unanswered dialog rejects
            }

            $( this ).remove();
        }
    });
    return def.promise();
}

然后這樣稱呼它：

confirmDialog("are your sure?").done(function() {
    // He/She said yes
}).fail(function() {
    // He/She said no
});

在此處閱讀有關jQuery Deferred的更多信息http://api.jquery.com/category/deferred-object/

小提琴： http ： //jsfiddle.net/fGQTj/

編輯：固定代碼，添加了小提琴