jQueryを使用してAJAX呼び出しが行われたときのコールバック

Question

コールバックの正常な動作に問題があります。ここに私が達成しようとしているものがあります：カートに追加したい2アイテムがありますので、2つの非同期POSTリクエストを作成します。これらの2つのPOSTリクエストが完了したら、カートの部分ビューを更新したいと思います。問題は、1つのアイテムだけがカートに追加されたように見えるということです。デバッグすると、2つのアイテムが追加されます。どんな提案や助けも素晴らしいだろう。前もって感謝します！ここ

は私のコードです：

var cart = [] 

function AddToCart(input) { 
    return $.ajax({ 
    method: 'POST', 
    url: '/cart/add.js', 
    data: input, 
    dataType: 'json' 
    }) 
    .done(function(data) { 
    return data; 
    }); 
} 

$("#addToCart").click(function() { 
    $('#capsContainer input:checked').each(function() { 
    var cartItem = { 
     id: $(this).val(), 
     quantity: 1 
    } 

    cart.push(cartItem); 
    }); 

    var test1 = AddToCart(cart[0]); 
    var test2 = AddToCart(cart[1]); 

    $.when.apply(test1, test2).done(function() { 
     $.getJSON('/cart.js', function(data) { 
     $('.cart-item-count').text(data.item_count); 
     $('.cart-item-price').html(formatMoney(data.total_price));  
     ShowCart(); 
    }); 
    }) 
}); 

Answer 1

問題の一部は、コードの前後で発生する可能性のあるajaxリクエストを使用していることです。それらは非同期であるため、ブラウザのJavascriptパーサーがコードを実行する方法に応じて、他のコードがページ上で実行される前に起動/復帰する可能性があります。むしろ、非同期AJAXリクエストにコールバックを使用しようとするよりも、あなただけのあなたができる、は基本的にちょうどjQueryの$.post()メソッドのように動作しますajaxq.js

ajaxq.jsと呼ばれる小さな600バイトのライブラリを使用することにより、全体の相互作用を制御することができます非同期で実行するために複数のキューを名前で指定し、それらにコールバックをアタッチします。

ここでは、このライブラリを使用してAjaxカートプレビューをセットアップする方法の簡単な例を示します。

/* queue up an AJAX request */ 
$.postq("set_data", "add_items.php", {"itemID": someItemID, "customerID": customerID }, 
    function(result1) { 


    /* perform new request at the end of first request */ 

    $.postq("get_data", "get_items.php", { "id": customerID }, 
     function(result2) { 

    /* add in code to perform at the end of the second ajax POST request */ 

    }); // end of request 2 

}); // end of request 1 

---

ここajaxq.jsライブラリ使用して、あなたの例を示しますので、 `$ .whenを使用して、すでに延期された` jqXHR`オブジェクトを返します.ajax`

function AddToCart(input) { 
    $.postq("add_item", "/cart/add/js", input, function(result) { 
     preview_items(); 
    }, "json"); 

} 

function preview_items() { 
$.getJSON('/cart.js', function(data) { 
     $('.cart-item-count').text(data.item_count); 
     $('.cart-item-price').html(formatMoney(data.total_price));  
     ShowCart(); 
} 


$(document).ready(function() { 
    $("#addToCart").on("click" function() { 
    $('#capsContainer input:checked').each(function(elem) { 
     var cartItem = { 
     id: $(this).val(), 
     quantity: 1 
     } 

     cart.push(cartItem); 
    }); 

    var test1 = AddToCart(cart[0]); 
    var test2 = AddToCart(cart[1]); 

    }); 

Answer 2

あなたAddToCart方法が既に繰延オブジェクトを返します。 .doneメソッドを2回呼び出しています。

あなたのコードは次のようになります。

var cart = [] 

function AddToCart(input) { 
    return $.ajax({ 
    method: 'POST', 
    url: '/cart/add.js', 
    data: input, 
    dataType: 'json' 
    }); 
} 

$("#addToCart").click(function() { 
    $('#capsContainer input:checked').each(function() { 
    var cartItem = { 
     id: $(this).val(), 
     quantity: 1 
    } 

    cart.push(cartItem); 
    }); 

    var test1 = AddToCart(cart[0]); 
    var test2 = AddToCart(cart[1]); 

    $.when(test1, test2).done(function() { 
     $.getJSON('/cart.js', function(data) { 
      $('.cart-item-count').text(data.item_count); 
      $('.cart-item-price').html(formatMoney(data.total_price));  
      ShowCart(); 
     }); 
     }) 
});