Imagine we have multiple lists of items.
<ul data-id="2">
<li>
<span>Item name</span>
</li>
<li>
<span>Item name</span>
</li>
<li>
<span>Item name</span>
</li>
</ul>
Each item is assigned a list_id attribute, which represents the ID of the list it belongs to, and an order attribute, indicating its position in the list.
When a specific event occurs, the goal is to update the list_id and order parameters for each item in this list.
This is what has been developed so far:
$('li').sortable({
update: function( event, ui ) {
if (this === ui.item.parent()[0]) {
var cards = ui.item.parent('ul li').map(function() {
return {
list_id: $(this).closest('ul').data('id'),
order: $(this).index(),
}
}).get();
$.ajax({
url: "/cards/",
type: "PATCH",
dataType: "json",
data: { cards: cards },
success: function(resp){
console.log('Yay');
}
});
}
}
});
An issue arises when attempting to output the cards array. The console.log(cards); command returns an empty array [] without any understandable data. Additionally, the Rails console does not seem to show any params array either.
The objective remains to send all the cards in the list to the Rails controller and update them simultaneously.