JavaScriptで下記のような処理を行いたいと思っています。
(1)ボタンを押下するとモーダルウィンドウが開く。
(2)モーダルウィンドウ内のボタンを押下すると、モーダルウィンドウ内にローディングバーが表示される。
(3)バックグラウンドでAjax(同期通信)を行う。
(4)(3)の通信完了後、モーダルウィンドウが自動で閉じる。
この部分の処理がどうしても下記のようになってしまい、困っています。
(1)ボタンを押下するとモーダルウィンドウが開く。
(2)モーダルウィンドウ内のボタンを押下すると、ローディングバーが表示されないままAjax通信が実行される。
(3)通信完了後、モーダルウィンドウが自動で閉じる。
プログラムは下記のように書いています。
(業務で書いているプログラムなので、業務にかかわる部分は伏せて書かせていただきます。
分かりづらいところなどございましたら申し訳ありません。)
JavaScript
1 // (1)のモーダルをDOMで作成 2 var select = $("<select>").addClass("col-xs-12"); 3 $.each(foo, function(hoge, fuga) { 4 select.append($("<option>").val(hoge).text(fuga)); 5 }); 6 var modal = $("<div>"); 7 modal.append(select); 8 9 modal.dialog({ 10 "modal":true, 11 "draggable":false, 12 "closeOnEscape":false, 13 "buttons": [ 14 { 15 text: "通信開始", 16 type: "button", 17 click : function() { 18 var hoge = function() { 19 var loading = $("<div>") 20 .addClass("progress progress-striped active") 21 .append($("<div>") 22 .addClass("progress-bar") 23 .css("width", "100%") 24 ); 25 $(".ui-dialog-content").prepend(loading); 26 } 27 $.when( 28 hoge() 29 ).done(function() { 30 // ajax通信(同期通信)の処理 31 hogehoge(); 32 33 // ウィンドウを閉じる 34 $(this).dialog("destroy").remove(); 35 }); 36 } 37 }, 38 { 39 text: "キャンセル", 40 type: "button", 41 click : function() { 42 // ウィンドウを閉じる 43 $(this).dialog("destroy").remove(); 44 }, 45 }, 46 ] 47 });
.done()
処理内の$(this).dialog("destroy").remove();
を削除したところ、下記のような動作となったため、
標題の「$.whenの中で行っているDOM操作が後から実行される」という動きになっていることが判明しました。
(1)ボタンを押下するとモーダルウィンドウが開く。
(2)モーダルウィンドウ内のボタンを押下すると、ローディングバーが表示されないままAjax通信が実行される。
(3)Ajax通信完了後、ローディングバーが表示される。
なお、$.when
の中にalert('hoge');
やconsole.log('hoge');
を記載した場合、
Ajax通信の前にそちらが実行されますので、DOM操作だけが実行されないようです。
また、同期通信の箇所を非同期通信にしても結果は変わらなかったため、同期通信が原因というわけでもないのかな…と考えております。
「こういうところが原因ではないか」というようなヒントやアイデアだけでもいただけると幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/26 11:16 編集
2018/07/26 12:20
退会済みユーザー
2018/07/28 18:02