通過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']); 
}