jQueryとAjax使ってforでループしながらigComboの中身を初期化したいよっていうお話
今までのソースが「success」「error」っていう古い非推奨の書き方だったのと、各コンボBOX毎にAjaxの記述があって冗長的だったので整理も兼ねて。
$("#hoge1").igCombo({ textKey: "hogeKey1", valueKey: "hogeVal" }); $("#hoge2").igCombo({ textKey: "hogeKey2", valueKey: "hogeVal" }); (中略) // ajaxによるコンボBOX設定 // urlはコントローラのRequestMapping // 初期値指定がある場合にも対応したかった var requestHdr = [ { url: $("#contextPath").val() +"/hoge/getHoge1", id: "#hoge1", defaultVal: ""}, { url: $("#contextPath").val() +"/hoge/getHoge1", id: "#hoge2", defaultVal: "ALL"} ]; var jqXHRListHdr = []; // 実行するAjaxを格納する配列 for (var i = 0; i < requestHdr.length; i++) { jqXHRListHdr.push( $.ajax({ type : "POST", data : JSON.stringify(jsonData), url : requestHdr[i].url, // 配列で指定したurlを順次受け取る cache : false, contentType : 'application/json', async : false, scriptCharset : 'utf-8' }) .then( // 通信成功時のコールバック function(data) { $(requestHdr[i].id).igCombo("option", "dataSource", data); // 初期値が指定されている場合はその値を設定 if (requestHdr[i].defaultVal != "") { $(requestHdr[i].id).igCombo("value", requestHdr[i].defaultVal); } }, // 通信失敗時のコールバック function(xhr, textStatus, errorThrown) { var errorInfo = $.parseJSON(xhr.responseText); location.href($("#contextPath").val() +"/sysError/"+ errorInfo.errNo +"/"+ errorInfo.errDate +"/"+ errorInfo.errContents); } ) ); } // ajaxによる処理を実行 // $.when関数にてまとめてAjax通信を実施 $.when(jqXHRListHdr).done(function () { console.log("通信成功"); 後続処理(); }).fail(function (ex) { console.log("Ajax通信に失敗しました"); });
とりあえずこんな感じで上手く設定はできた。
ただ、どうせ全通信の完了を待つなら「async : false」を取ればいいやと思いコメントアウトすると初期化ができなくなった。
どうやら
同期の場合 :.thenの中身まで実行→後続処理の実行
非同期の場合:後続処理の実行→.thenの中身実行
って順序になるみたい。
whenの前に.thenの処理を実行できるように記述してあげる必要があるみたいだけど、とりあえず今日は時間無くなっちゃったからここまで。
明日また頑張る。