1回のAJAXリクエストと同時に複数のレコードを保存しますか？

Question

私はjQueryを使用しています。Trelloのようなリスト間でカードをドラッグするためにソートできます。ユーザーがカードとやり取りを終えたら、そのカードのすべてのカードを保存する必要があります。

私は現在、ループごとにそのタイプのすべてのアイテムをループし、それぞれをAJAXリクエストで保存しています。

ui.item.parent('.js-CardsContainer').children('.js-CardContainer').each(function() { 
    var list_id = $(this).closest('.js-List').data('id'); 
    var order = $(this).index(); 
    var id = $(this).find('.js-Card').data('id'); 

    console.log(order); 

    $.ajax({ 
    url: "/cards/" + id, 
    type: "PATCH", 
    data: { 
     card: { 
     list_id: list_id, 
     order: order 
     } 
    }, 
    success: function(resp) { 
     // 
    } 
    }); 
}); 

カード数枚のリストではうまくいくようです。しかし、5枚以上のカードが保存されると、そのうちのいくつかが失敗します。 AJAXのリクエストがカードごとに使用されているからです。

だから、すべてのAJAXリクエストを1つのリクエストにまとめる必要があると思いますか？私はそれをどうやって行うのか分かりません。誰も助けることができますか？

これは、あなたがこのようなcardオブジェクトの配列でdataを提供するようにあなたのロジックを変更することができ、この

def update 
    @card = Card.find(params[:id]) 

    if @card.update_attributes(shared_params) 
     respond_to do |format| 
      format.js {} 
      format.json { render json: @card, status: :created, location: @card } 
     end 
    else 
     render :edit 
    end 
end 

Answer 1

のように見える私のコントローラの更新アクションに起こっている：

var cards = ui.item.parent('.js-CardsContainer .js-CardContainer').map(function() { 
    return { 
     list_id: $(this).closest('.js-List').data('id'), 
     order: $(this).index 
    } 
}).get(); 

$.ajax({ 
    url: "/cards/", 
    type: "PATCH", 
    data: { cards: cards }, 
    success: function(resp){ 
     // 
    } 
}); 

単一のインスタンスの代わりにカードの配列を処理するためにサーバー側のロジックを修正するだけで済みます。