0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

bootboxのconfirmで複数の入力チェックでのメッセージ表示を行おうとした

Last updated at Posted at 2019-09-30

何をしようとしたか

画面から更新ボタンが押された時に入複数の入力チェックを行い、
チェックに引っかかった場合はそれぞれの入力チェックにあった確認メッセージをbootboxで表示、確認を行おうとしました。

初めに書いたコード

以下のコードでは確認ダイアログが表示されませんでした。

$('#koushin').on('click', function() {
    let msg = '';

    // 確認1 確認ダイアログ表示
    if (koumoku1) {
        bootbox.confirm("日付が○日以下ですがよろしいですか?", function(result) {
            if(!result) {
                return false;
            }
        });
    };

    // 確認2 確認ダイアログ表示
    if (koumoku1) {
        bootbox.confirm("項目2が変更されていますがよろしいですか?", function(result) {
            if(!result) {
                return false;
            }
        });
    };

    // 更新処理を実行
    koushin();
    return true;
});

function koushin() {
    // 更新処理
};

想定ではbootbox.confirm( ~ の箇所で毎回確認ダイアログが表示されると考えていた。

なぜ想定通りに動作しなかったのか

コールバック関数で、onでの処理完了後にダイアログが呼び出されるため。

考えた解決方法

表示させる確認メッセージは別々に表示させないと行けないものでは無かったため、1回で表示させることによってこの問題を解決しました。

$('#koushin').on('click', function() {
    let msg = '';

    // 確認1
    if (koumoku1) {
        msg = msg + "日付が○日以下ですがよろしいですか?" + "<br>";
    };

    // 確認2
    if (koumoku2) {
        msg = msg + "項目2が変更されていますがよろしいですか?";
    };

    // 確認ダイアログ表示
    if(msg) {
        bootbox.confirm(msg, function(result) {
            if(result) {
                koushin();
                return true;
            } else {
                return false;
            }
        });
    }

    // 確認する事がない場合は確認ダイアログを表示せずに更新
    koushin();
    return true;
});

function koushin() {
    // 更新処理
};

bootboxに表示させるメッセージを改行させるときは\r\nではなく<br>とhtmlタグを付けないと行けないことも合わせてこのときに知ることが出来ました。
確認1のメッセージのみに入力チェックが引っかかった場合、msgの後ろに<br>がついてしまいますが、対象のブラウザ(IE11)ではありなしで表示に差が無かったため、そのままにしました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?