到Rails Controller的Ajax POST请求的格式参数-用于jQuery-UI可排序列表 [英] Formatting Parameters for Ajax POST request to Rails Controller - for jQuery-UI sortable list

问题描述

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

I'm using the jQuery-UI Sortable Connected Lists. I'm saving the order of the connected lists to a Rails server.

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

My approach is to grab the list ID, column ID and index position of each list item. I want to then wrap this into an object that can be passed as a parameter back to the Rails Controller to be saved into the database. So ideally i'm looking to format the parameter like this: Parameters: {"Activity"=>[{id:1,column:2,position:1},{id:2,column:2,position:2} ,...]}

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

How do I properly format my parameters to be passed in this Ajax POST request? Right now, with the approach below, I'm passing on Parameters: {"undefined"=>""}

这是我当前无法使用的jQuery代码(咖啡脚本):

This is my current jQuery code (Coffeescript) which doesn't work:

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.

My apologies because this seems like a really amateur question but I'm just getting started with programming jQuery and Javascript.

推荐答案

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

Assuming that all your selectors are correct, then you should be able to do this:

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

---

您还可以简化其余代码:

---

You can also simplify the rest of your code:

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) }

或更紧凑(如果您喜欢这种东西):

Or even more compact (if you like that sort of thing):

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])将其解压缩到您的控制器中.

Then you can JSON.parse(params[:Activity]) to unpack it in your controller.

在评论中稍加讨论后，我认为您的index值是错误的.这样做:

After a bit of discussion in the comments, I think your index values are wrong. Doing this:

index = ui.item.index() + 1

将为每个<li>赋予相同的index.您可能想要这样的东西:

will give you the same index for each <li>. You probably want something more like this:

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

这应该为您提供要迭代的<li>集合中当前<li>(@)的索引.另外，您可以使用 each 传递给迭代器函数的参数:

That should give you the index of the current <li> (@) within the collection of <li>s that you're iterating over. Alternatively, you could use the arguments that each passes to the iterator function:

$('[id*="day"] > li').each (index, el) ->
  # Just use `index` as-is in here...

这篇关于到Rails Controller的Ajax POST请求的格式参数-用于jQuery-UI可排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！