0

次の HTML コードがあります。

<table class="viewTable">
  <tr>
    <td>Price</td>
  </tr>
</table>

そして、次のようにJavascriptを使用してデータを動的に挿入したい:

var totalPrice = 0;
map.each(function(key , value , i) {
    params = {};
    params.id = key;
    // get datas from Controller class via ajax 
    ajax(url, params, false, function(result) {
        totalPrice += setData(result , key , value);
    });
});
// alert("something!"); // this may satisfy my problem.. I have no idea..
// Total Price shown on last row
$('table.viewTable tr:last').after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"+num2Currency(totalPrice)+"</td></tr>");

setData機能は次のとおりです。

function setData(result , partsId , count) {
var price = result.price;
html = [];
html.push("<tr>");
html.push("<td><div>"+price+"</div></td>"); 
html.push("</tr>");
$('table.viewTable').append(html.join(''));
return price;}

この質問に対するジェイドの回答の map 関数を使用しました: Map in JavaScript。

私の問題は、結果の表示または手順自体が正しくないことです。最初に価格行を挿入し、次に totalPrice 行を挿入する必要があります。代わりに、順序が逆になり、totalPrice が最初に表示され、その後に価格行が続きます。totalPrice を挿入する前にアラートステートメントを挿入すると、問題なく動作しました。助言がありますか？コードの何が問題になっていますか? jQuery は非同期でコンパイルされますか?

4

2 に答える 2

2

ジェップ。Ajax 呼び出しは非同期です。つまり、すぐには実行されません。完了した ajax 呼び出しの量を追跡する必要があります。すべての呼び出しが完了したら、合計を追加できます。

このようなもの：

var totalPrice = 0;
var completedAjaxCalls = 0;
map.each(function(key , value , i) {
    params = {};
    params.id = key;
    // get datas from Controller class via ajax 
    ajax(url, params, false, function(result) {
        totalPrice += setData(result , key , value);
        completedAjaxCalls += 1;
        if(completedAjaxCalls == map.length) {
            $('table.viewTable tr:last').after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"+num2Currency(totalPrice)+"</td></tr>"); 
        }
    });
});

編集:これを達成するためのより良い方法はおそらくありますが、非同期メソッドの概念を理解する必要があるため、ここでは単純なアプローチが適切であると考えました。

于 2013-08-07T06:07:41.250 に答える
1

あなたは試す必要があります

var totalPrice = 0;
var requests = [];
map.each(function(key, value, i) {
    params = {};
    params.id = key;
    // get datas from Controller class via ajax
    // make sure that `ajax()` return the promise returned by $.ajax()
    requests.push(ajax(url, params, false, function(result) {
        totalPrice += setData(result, key, value);
    }));
});
$.when.apply($, requests).done(function() {
    // alert("something!"); // this may satisfy my problem.. I have no idea..
    // Total Price show at last row
    $('table.viewTable tr:last')
    .after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"
           + num2Currency(totalPrice) + "</td></tr>");
})
于 2013-08-07T06:07:58.997 に答える