通过ajax在Rails中没有窗体提交复选框

Question

如何通过ajax提交（发布/放置）复选框值到Rails 3控制器而无需将复选框包装在窗体中？换句话说，我如何将复选框序列化为一个没有表单的数组。

任何与此有关的帮助将不胜感激。谢谢！

这里是我试图做专：

查看：

<ul> 
    <%= @items.each do |item| 
    <li> 
     <%= checkbox_tag_tag "item_ids[]", item.id, false, 
      :class => "item-checkbox" %> 
     <%= item.name %> 
    </li> 
    <% end %> 
</ul> 

控制器：

class ItemsController < ApplicationController 

    respond_to :html, :js, :json 
    . 
    . 
    . 
    def update_multiple_items 
    Item.update_all(
     { :category_id => params[:category_id] }, 
     { :id => params[:item_ids] } 
    ) 
    end 

end 

的Javascript（jQuery的）：

$("#update-link").click(function() { 

    var categoryId = 2; 

    var itemsArray = $(".item-checkbox:checked").serializeArray(); 

    $.ajax({ 
    type: "PUT", 
    url: "items/update_multiple_items", 
    data: { 
     category_id: categoryId, 
     items_ids: itemsArray 
    }, 
    dataType: "script" 
    }); 

}); 

我得到活动记录错误有以下信息：

!ruby/hash:ActiveSupport::HashWithIndifferentAccessname: item_ids[]value: ''303''' 

这里是请求参数：

Parameters: 

{"parent_id"=>"7", "item_ids"=>{"0"=>{"name"=>"item_ids[]", "value"=>"302"}, "1"=>  
{"name"=>"item_ids[]", "value"=>"303"}}} 

Answer 1

我不能肯定地说，但它肯定好像你可能有一个问题，你$(".item-checkbox:checked").serializeArray(); ..这不会产生一个简单的项目ID数组。相反，它会生成一个代表每个复选框的对象数组。

好像你什么数据格式想提交：

{"parent_id"=>"7", "item_ids"=> [1,2,3]} 

要提交什么：

{"parent_id"=>"7", "item_ids"=>{"0"=>{"name"=>"item_ids[]", "value"=>"302"}, "1"=> {"name"=>"item_ids[]", "value"=>"303"}}} 

换句话说，$(".item-checkbox:checked").serializeArray();产生哈希数组大致格式：[{name: "item_ids[]", value: "302"},{name: "item_ids[]", value: "303"}]

但你只是想提交[302,303]或["302","303"]。

我会（使用下划线JS例子）做：

var serializedArray = $("input:checked").serializeArray(); 

var itemIdsArray = _.map(serializedArray, function(item){ 
    return item["value"]; 
}); 

# itemIdsArray should now be ["302","303"].. you can check by a console.log 
console.log(itemIdsArray); 

然后在你的Ajax提交此阵：

$.ajax({ 
    type: "PUT", 
    url: "items/update_multiple_items", 
    data: { 
    category_id: categoryId, 
    items_ids: itemsIdsArray 
    }, 
    dataType: "script" 
}); 

*非underscorejs例如*

如果你不使用underscorejs，你可以这样写。 （但是，我建议你检查一下，这很好：http://underscorejs.org/。这是一个很多简单易用的基本功能的小库，人们不断地推出自己的基本功能）。

var serializedArray = $("input:checked").serializeArray(); 
var itemIdsArray = []; 

for (var i = 0, length = a.length; i < length; i++) { 
    itemIdsArray.push(serializedArray[i]['value']); 
}