Saving multiple params in a single array with ajax and rails

Question

When a card is dragged inside a list, I'm using thejQueryUI sortable plugin's update callback to send the new position of each card to my controller. This AJAX request posts the position attribute of every card in whichever list the dragged card was released in.

$(".js-Sortable").sortable({
    connectWith: ".js-Sortable",
    items: ".js-CardContainer",
    update: function( event, ui ) {
        if (this === ui.item.parent()[0]) {

            var data = $(this).sortable('serialize');

            $.ajax({
                url: "/c/sort",
                type: "POST",
                dataType: "script",
                data: data,
                success: function(resp){
                    console.log('Yay');
                }
            });
        }
    }
});

This sends params which look something like this

Parameters: {"card"=>["39", "2", "1", "6", "40", "5", "18", "3", "16", "7", "17", "8", "15", "9", "10", "11", "12", "13", "14", "4"]}

I'm then updating each affected card's position attribute in my controller action like this:

def sort
    params[:card].each_with_index do |id, index|
        card = Card.find(id)
        card.update_attribute(:position, index) if card
    end

    head :ok
end

The view looks like this:

<ul class="js-CardsContainer js-Sortable">
  <% list.cards.order(:position).where(archived: false).each do |card| %>
    <li class="js-CardContainer" id="card-<%= card.id %>">
      <%= link_to card, class: 'js-Card', :data => { :id => card.id }, remote: true do %>
        <span><%= card.title %></span>
      <% end %>
    </li>
  <% end %>
</ul>

This is all working so far. The problem is, cards can be moved across different lists. So, I need to somehow get the id of whichever list the dragged card was released in and post that with the AJAX request too.

I can get the list_id as a variable, but how can I add this list_id to the array in the AJAX request?

will discuss it late i am busy now i will surly try to resolve your issue — uzaif
– uzaif, Commented Jul 8, 2017 at 7:11
<%= link_to card, class: 'js-Card', :data => { :id => card.id,list_id:list.id }, remote: true do %> <span><%= card.title %></span> <% end %> try this and let me — uzaif
– uzaif, Commented Jul 8, 2017 at 15:01

uzaif · Accepted Answer · 2017-07-09 13:21:51Z

as per your question, you are getting cards_id and you want to pass list_id along with it

in your DOM you need to add list_id first

<%= link_to card, class: 'js-Card', :data => { :id => card.id }, remote: true,"data-list-id":list.id do %>
        <span><%= card.title %></span> <% end %>

now you need to fetch this list id in the event handler and combine it with your cards_id params

$(".js-Sortable").sortable({
    connectWith: ".js-Sortable",
    items: ".js-CardContainer",
    update: function( event, ui ) {
        if (this === ui.item.parent()[0]) {
            var data = {}
            var data['cards_id'] = $(this).sortable('serialize');
            var data['list_id'] = $(this).attr("data-list-id")
            $.ajax({
                url: "/c/sort",
                type: "POST",
                dataType: "script",
                data: data,
                success: function(resp){
                    console.log('Yay');
                }
            });
        }
    }
});

in your controller sort action, you need to follow this code

params[:card].each_with_index do |id, index, list_id| 
card = Card.find(id) 
card.update(:position => index, 
:list_id => params[:ListId]) 
end

Hope it help

kparekh01 · Accepted Answer · 2017-07-09 15:23:59Z

1

Sorry I was late to respond. To build on @uzaif's answer you can also set key value pairs inside of the data hash itself like so:

 var data = {$(this).sortable('serialize'), list_id: $(this).attr("data-list-id")}

Like @uzaif said, make sure to adjust your controller to accept the list_id in the parameters hash.

answered Jul 9, 2017 at 15:23

kparekh01

2211 silver badge7 bronze badges

Comments

michaeldever · Accepted Answer · 2017-07-09 18:13:53Z

1

As I mentioned in the previous comment, at least one of the objects sent on an event like sorting (and in other jquery UI events like draggable) will usually contain a reference to the previous element.

In this case, the ui object contains a sender array which will include a reference at index 0 to the most recent sender: ui.sender[0]

I've given an example here of how this could be used in your case:

http://jsfiddle.net/6npx24uf/

answered Jul 9, 2017 at 18:13

michaeldever

3594 silver badges14 bronze badges

1 Comment

colmtuite Over a year ago

Thanks Mick. I was actually having trouble with combing that variable with the other data in my AJAX request, then passing that data in my rails controller action. I already had the variable I needed. Thanks for your pointer though, I can use that event data for something else.

Collectives™ on Stack Overflow

Saving multiple params in a single array with ajax and rails

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related