0

結果を同じDOM要素に返す2つのjQuery ajax呼び出しの結果を組み合わせる方法について頭を悩ませています。これが私のセットアップです：

  • 呼び出しは 2 つあります。1 つは食品のリストから、もう 1 つは食材のリストからです。
  • どちらの呼び出しも成分のリストを返します
  • アイデアは、2 つのソース (食品のリストと材料のリスト) に基づいて買い物リスト (購入する材料) を作成することです。
  • ユーザーは、食品を選択して買い物リストを作成するか (材料はデータベースから取得されます)、または材料のリストから直接材料を選択できます。

問題:これら 2 つの呼び出しは、それぞれ単独で正常に機能しています。しかし、問題は、1 つの呼び出しの結果が常に 2 番目の呼び出しの結果を置き換え、その逆になることです。

var postUrl = "http://localhost:8000/ingredients/";
var ingrUrl = "http://localhost:8000/ingrs/";
var selectedFoods = [];
var selectedIngrs = [];


$('.foods a').click(function(event){
    clickedLink = $(this).attr('id');

    if (selectedFoods.indexOf(clickedLink) != -1) {
        var index = selectedFoods.indexOf(clickedLink);
        selectedFoods.splice(index, 1);}   
    else {
        selectedFoods.push(clickedLink);
    };

    var jsonFoods = JSON.stringify(selectedFoods);
    $.ajax({
        url: postUrl,
        type: 'POST',
        data: jsonFoods,
        dataType: 'html',
        success: function(result){
            $('.ingredients').html(result);
            }
    });       
});


$('.ingr-list a').click(function(event) {
    clickedIngr = $(this).attr('id');


    if (selectedIngrs.indexOf(clickedIngr) != -1) {
        var index = selectedIngrs.indexOf(clickedIngr);
        selectedIngrs.splice(index, 1);}   
    else {
        selectedIngrs.push(clickedIngr);
    };

    var jsonIngrs = JSON.stringify(selectedIngrs);
    $.ajax({
        url: ingrUrl,
        type: 'POST',
        data: jsonIngrs,
        dataType: 'html',
        success: function(result){
            $('.ingredients').html(result);
            }
    });

});

代わりに of$('.ingredients').html(result);を使用してこの行をいじってみましたが、ユーザーはリストから成分を削除できるはずなので、うまくいきません (両方の関数の if 条件を参照してください)。appendhtml

4

3 に答える 3

3

それらに別のコンテナを使用するだけです

<div class="ingredients">
    <div id="first"></div>
    <div id="second"></diV>
</div>

次に.html()、$("#first")のと$("#second")の代わりに.ingredients

于 2012-07-02T07:16:13.770 に答える
0

.appendを使用します

 $('.ingredients').append(result);
于 2012-07-02T07:14:51.850 に答える
0

これが答えのアンダースコアjsテンプレートかどうかを確認してください

あなたがする必要があるのは、html を返すのではなく、jsonを返し、js テンプレートを使用してブラウザーでレンダリングすることです。

いくつかの偽のコード:

var global_ingredients = [];
var list = "<% _.each(ingredients, function(ingredient) \
           { %> <li><%= ingredient.name %></li> <% }); %>;";

$.post('', postdata, function(ingredients){
    global_ingredients.push(ingredients); 
    // here you could also eliminate duplicated ingredients, 
    // sort the ingredients, do whatever you likes
    var new_html = _.template(list,  global_ingredients); 
    $('.ingredients').html(new_html);
});
于 2012-07-02T07:31:06.223 に答える