0

我正在使用 jQuery-UI 可排序连接列表。我将连接列表的顺序保存到 Rails 服务器。

我的做法是获取每个列表项的列表 ID、列 ID 和索引位置。然后我想将它包装到一个对象中，该对象可以作为参数传递回 Rails 控制器以保存到数据库中。所以理想情况下，我希望像这样格式化参数：Parameters: {"Activity"=>[{id:1,column:2,position:1},{id:2,column:2,position:2} ,...]}

如何正确格式化要在此 Ajax POST 请求中传递的参数？现在，通过下面的方法，我正在传递 Parameters: {"undefined"=>""}

这是我当前不起作用的 jQuery 代码（Coffeescript）：

jQuery ->
  $('[id*="day"]').sortable(
    connectWith: ".day"
    placeholder: "ui-state-highlight"
    update: (event, ui) ->
      neworder = new Array()
      $('[id*="day"] > li').each ->
        column = $(this).attr("id")
        index = ui.item.index() + 1
        id = $("#" + column + " li:nth-child(" + index + ") ").attr('id')
        passObject={}
        passObject.id = id
        passObject.column = column
        passObject.index = index
        neworder.push(passObject)
      alert neworder
      $.ajax
        url: "sort"
        type: "POST"
        data: neworder
    ).disableSelection()

我很抱歉，因为这似乎是一个非常业余的问题，但我才刚刚开始编写 jQuery 和 Javascript。

4

2 回答 2

1

假设你所有的选择器都是正确的，那么你应该能够做到这一点：

$.ajax
  url: "sort"
  type: "POST"
  data: { Activity: JSON.stringify(neworder) }

您还可以简化其余代码：

update: (event, ui) ->
  neworder = [ ]
  $('[id*="day"] > li').each ->
    # 'this' should be the DOM element so just read off the 'id' attribute,
    # you don't need to waste time building a jQuery object just to get an
    # 'id' attribute.
    column = @id
    index  = ui.item.index() + 1

    # String interpolation to skip the string addition noise. You already
    # have a jQuery object here so there's nothing wrong with using
    # attr('id') here.
    id = $("##{column} li:nth-child(#{index})").attr('id')

    # You don't need 'passObject' here, just use an object literal and push
    # it onto neworder all in one go.
    neworder.push(
      id:     id
      column: column
      index:  index
    )
  $.ajax
    url: "sort"
    type: "POST"
    data: { Activity: JSON.stringify(neworder) }

或者更紧凑（如果你喜欢那种东西）：

update: (event, ui) ->
  neworder = [ ]
  $('[id*="day"] > li').each ->
    index = ui.item.index() + 1
    neworder.push(
      id:     $("##{column} li:nth-child(#{index})").attr('id')
      column: @id
      index:  index
    )
  $.ajax
    url: "sort"
    type: "POST"
    data: { Activity: JSON.stringify(neworder) }

然后你可以JSON.parse(params[:Activity])在你的控制器中解压它。

经过评论中的一些讨论，我认为您的index价值观是错误的。这样做：

index = ui.item.index() + 1

会给你同样index的每个<li>。你可能想要更像这样的东西：

$lis = $('[id*="day"] > li')
$lis.each ->
  index = $lis.index(@)
  #...

这应该为您提供您正在迭代的 s 集合中当前<li>( ) 的索引。或者，您可以使用传递给迭代器函数的参数：@<li>each

$('[id*="day"] > li').each (index, el) ->
  # Just use `index` as-is in here...
于 2012-11-04T00:14:38.993 回答
0

这是我的 jQuery 代码（在 Coffeescript 中）：

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 控制器：

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

回到我的模型中，我按位置订购“活动”关联。

has_many :activities, :order => 'position'

非常感谢您的帮助@muistooshort

于 2012-11-05T06:30:25.813 回答