0

複数のダイアログボックスを作成しようとしていますが、それらのダイアログボックスの作成方法を理解できません。

すべて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
}
});

dialogIDここでの問題は、ページが読み込まれると、ページの読み込み時に変数を設定できないため、すべてのdivが表示されるため、ダイアログが表示されないことです。また、このページには同じ機能を実行するダイアログが少なくとも5つあります。より良いアプローチを提案したり、ここで私が間違っていることを教えていただければ幸いです。

ありがとう、ミラノP

4

1 に答える 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 に答える