何をしようとしたか
画面から更新ボタンが押された時に入複数の入力チェックを行い、
チェックに引っかかった場合はそれぞれの入力チェックにあった確認メッセージを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)ではありなしで表示に差が無かったため、そのままにしました。