Mehrere Datensätze gleichzeitig mit einer einzigen AJAX-Anfrage speichern?

Question

Ich benutze jQuery Sortable, um Karten zwischen Listen wie Trello zu ziehen. Wenn der Benutzer die Interaktion mit einer Karte beendet hat, muss ich alle Karten in dieser Liste speichern.

Ich mache es derzeit mit einer jeden Schleife, Schleifen über alle Elemente dieses Typs und speichern jedes mit einer AJAX-Anfrage.

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) { 
     // 
    } 
    }); 
}); 

Es scheint für Listen mit nur ein paar Karten zu arbeiten. Aber wenn 5+ Karten gespeichert werden, scheitern einige. Ich nehme an, das liegt daran, dass separate AJAX-Anfragen für jede Karte verwendet werden?

Also, ich denke, ich muss alle AJAX-Anfragen in einer einzigen Anfrage kombinieren? Ich habe keine Ahnung, wie das geht. Kann jemand helfen?

Das wird meiner Controller Update-Aktion, die wie folgt

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

Sie Ihre Logik sieht so ändern können, dass Sie data mit einer Reihe von card Objekte bieten, wie folgt aus:

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){ 
     // 
    } 
}); 

Sie müssen dann einfach Ihre serverseitige Logik ändern, um das Kartenarray anstelle einer einzelnen Instanz zu handhaben.