LoginSignup
5
6

More than 5 years have passed since last update.

jQuery.DeferredでjQuery UI Dialogを逐次処理させてみた

Last updated at Posted at 2014-08-13

jQuery UIのDialogを以下のように拡張してやると、Yes, Noを選択したときの
処理制御は簡単に実装できます。

function confirmDialog(message, funcYes, funcNo) {
    $("#dialog-confirm-message").text(message);
    $("#dialog-confirm").dialog({
        width : 600,
        height : 400,
        modal : true,
        buttons : {
            "はい" : function() {
                $(this).dialog("close");
                if (funcYes)
                    funcYes();
            },
            "いいえ" : function() {
                $(this).dialog("close");
                if (funcNo)
                    funcNo();
            }
        }
    });
}

警告は出したい。
しかし、ユーザーが許可した場合に限っては、処理を継続するダイアログを
使いたい場面があったので、jQuery.Deferredを使って実装してみました。

function sequentialConfirmDialog(arr) {
  var dfd = $.Deferred();
  if (arr.length == 0) {
    dfd.resolve();
  } else {
    var message = arr.pop();
    sequentialConfirmDialog(arr).done(function() {
      var funcYes = function() {
        dfd.resolve();
      };
      var funcNo = function() {
        dfd.reject();
      };
      confirmDialog(message, funcYes, funcNo);
    });
  }
  return dfd.promise();
}

引数の配列には、表示したいメッセージを表示したい順に入れています。
多次元配列にしてfuncYes, funcNoでやりたい処理を入れることも可能です。

実例は、、、手元にないので気が向いたら更新します。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6