jQuery-UI 可排序连接列表将顺序和关联保存到 rails 模型答案

【问题标题】：jQuery-UI Sortable Connected-Lists save order and association to rails modeljQuery-UI 可排序连接列表将顺序和关联保存到 rails 模型
【发布时间】：2012-10-23 16:00:11
【问题描述】：

假设我有：包含许多“问题”的“调查”，其中包含许多“答案”

如果我的“调查”有 2 个“问题”实例，我们称它们为：“好问题”和“坏问题”

“好问题”有 5 个“答案”，“坏问题”有 3 个“答案”

如果“好问题”和“坏问题”是通过 jQuery-UI 交互连接的可排序列表。 http://jqueryui.com/sortable/#connect-lists

我知道如何使用 jQuery-UI 将它们显示为 2 个可排序的列表，并且我还可以将“答案”从“坏问题”放到“好问题”中。但是我如何将他们新排序的位置和他们新排序的关联保存到另一个“问题”并返回到 Rails 数据库？

Railscasts 有如何为单个可排序列表保存位置，但不为属于不同关联模型的列表保存位置。 http://railscasts.com/episodes/147-sortable-lists-revised

非常感谢这里的帮助！

编辑

我意识到我只需要 POST 到 Rails 控制器，即我将“答案”放入的列表的元素 id（即<ol class = "connectableSortable" id = "Good_Question"</ol>）

这是 Railscast 如何向 Rails 控制器发送 POST 以按可排序顺序传递 object_id 数组的语法。

jQuery ->
  $('#faqs').sortable(
    axis: 'y'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))
  )

我将如何更新此 POST 以将列表 ID 传递给它，这样我就可以将“答案”的“问题”外键更新为它所属的列表“ID”？

这个 SO 答案有一种检索列表 ID 的方法。 Get the item/object where the element is dropped

所以现在，我真的只需要知道如何将一个额外的参数传回 Rails 控制器。有什么帮助吗？

【问题讨论】：

您可以使用 $('li.selected').index() 之类的方法获取列表的位置
我假设 Question 实例给出的列表是 Answer 实例的数组？然后将它们组合成一个数组，您可以使用master_array = arr1 + arr2 并将其提供给 jQuery。但是，您保存他们新排序的位置是另一回事。您实际上想要保存与 Survey 相关的列表顺序，而不是 Question。只需将它画在一张纸上，从左侧的调查开始，然后从问题一直到右侧的答案。另外，一个问题可以用于一项以上的调查吗？
目前，一个“问题”只属于 1 个“调查”。此外，“答案”仅属于 1 个“问题”。在这种情况下，我正在尝试更改“答案”与其“问题”之间的关联

标签： jquery ruby-on-rails ruby jquery-ui jquery-ui-sortable

【解决方案1】：

经过几天的努力，我能够弄清楚我想要什么。这里的模型是一天有很多活动（而不是原来的问题有很多答案）。

这是我的 jQuery 代码（在 Coffeescript 中）：使用 jQuery 选择器获取每个列表项的 ID 和每个列表项的列 ID。将其作为参数推送，如下所示Activity:[{"id":"1", "column":"1"}, {"id":"2", "column":"1"}...etc]

jQuery ->
  $('[id*="day"]').sortable(
    connectWith: ".day"
    placeholder: "ui-state-highlight"
    update: (event, ui) ->
      neworder = new Array()
      $(this).children().each ->
        column = $(this).parent().attr("id").match(/\d+/)[0]
        id = $(this).attr("id").match(/\d+/)[0]
        neworder.push(
          id: id
          column: column
        )
      alert neworder
      $.ajax
        url: "sort"
        type: "POST"
        data: { Activity: JSON.stringify(neworder) }
    ).disableSelection()

我如何将 AJAX 调用解析回 Rails 控制器：我正在遍历数组中的每个 {"id":"1", "column":"1"}object 并获取它的索引位置。

def sort
    JSON.parse(params[:Activity]).each_with_index do |x, index|
      idx = x["id"]
      positionx = index+1
      column = x["column"]
      activity = Activity.find(idx)
      activity.update_attributes(:position => positionx, :day_id => column)
    end
    render nothing: true
  end

回到我的模型中，我按位置排序“活动”关联，因此当我在视图中列出它时，它会显示在正确的位置。

class Day < ActiveRecord::Base
  has_many :activities, :order => 'position'
  accepts_nested_attributes_for :activities, allow_destroy: true 
end

更多关于我如何在这两个答案中得出这个结论的细节：

Formatting Parameters for Ajax POST request to Rails Controller - for jQuery-UI sortable list

jQuery AJAX POST to Rails Controller. Error when doing each_with_index (TypeError can't convert Symbol into Integer)

【讨论】：