设置对Rails控制器的Ajax POST请求的格式参数-用于jQuery-UI可排序列表
我使用的是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编程。
回答 2
Stack Overflow用户
发布于 2012-11-04 08:14:39
假设您的所有选择器都是正确的，那么您应该能够这样做：
$.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将为每个<li>提供相同的index。你可能想要更多像这样的东西：
$lis = $('[id*="day"] > li')
$lis.each ->
index = $lis.index(@)
#...这将为您提供当前<li> (@)的索引，该索引位于您正在迭代的<li>集合中。或者，您可以使用each传递给迭代器函数的参数：
$('[id*="day"] > li').each (index, el) ->
# Just use `index` as-is in here...Stack Overflow用户
发布于 2012-11-05 14:30:26
这是我的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()如何解析返回给Rails控制器的AJAX调用：
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
https://stackoverflow.com/questions/13214454
复制相似问题
腾讯云开发者
