如何将JavaScript数据发布到Rails控制器动作？

Question

I am using jQuery Shapeshift for drag and drop ordering for some lists that i have. All i need is to send or post this data below to my rails controller action so i can update the order.

This is what i get in my console each time i drag a list.

list_46
0
list_45
1
list_38
2
list_44
3
list_39
4
list_37
5

This is the exact path that i need to send that data above to. I have my routes setup correctly.

sortlists_boards POST  /boards/sortlists(.:format) 

Javascript Code

jQuery(function() {
  $('.listwrap').shapeshift();
  return $('.listwrap').on('ss-rearranged', function(e) {
    $(this).children().each(function() {
      #I need to send/post these two lines below to sortlists_boards_path 
      console.log($(this).attr("id"))
      console.log($(this).index())    
    });
  });
});

Some Github issues that might help

https://github.com/McPants/jquery.shapeshift/issues/64

https://github.com/McPants/jquery.shapeshift/issues/88

https://github.com/McPants/jquery.shapeshift/issues/48

Answer 1

在每次拖放时创建/更新JavaScript对象，并将ajax请求发送到控制器，您可以在其中读取对象并将其存储在数据库中。

Answer 2

First, modify your Javascript to create an array of ordered pairs and send it to your endpoint:

jQuery(function() {
  $('.listwrap').shapeshift();
  $('.listwrap').on('ss-rearranged', function(e) {
    ordered_items = [];
    $(this).children().each(function() {
      ordered_items.push([$(this).attr("id"), $(this).index()]);
    });
    $.post('/boards/sortlists',
      {ordered_items: JSON.stringify(ordered_items)},
      function(data, status, jqXHR) {
      // This is what gets rendered from your rails controller + action
    });
  });
});

Then, review what it looks like on the Rails side and do something with it

class BoardsController < ApplicationController
  # ...
  def sortlists
    logger.info params[:ordered_items]
  end
  # ...
end

The output of that will go to log/development.log