0

我正在尝试创建多个对话框，有些我无法理解如何创建这些对话框。

DIV's对于每个对话框，我都有每个操作的消息。基本上，如果用户检查CheckBox然后出现对话框，说明您要确认此操作。一段时间后，如果用户再次取消选中该选项，CheckBox则会出现另一个带有差异消息的对话框。请帮我解决这个问题。

这是我到目前为止所得到的。

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

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

4

1 回答 1

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/

编辑：固定代码，添加小提琴

于 2013-02-19T10:57:23.793 回答