使用Ajax更新Rails索引视图中的复选框值

时间:2016-01-15 16:55:09

标签: ruby-on-rails ajax

我想在rails应用程序中应用一个小的Ajax示例。我在索引视图中有一个带有复选框的项目模型。我已经为索引视图中呈现的复选框创建了一个form_for。我想检查复选框并更新数据库中的复选框值。 我正在学习Ajax,我通过添加beforeSend和函数(数据)来应用一些测试。从我读到的Ajax有POST和GET。如果我添加类型:' POST' Rails会尝试创建一些东西,找不到有效的路由路径并且会出错。我想更新数据库中的复选框值,它在Rails中是一个PUT。我该怎么办?你能指点我正确的方向吗?

这是我在索引视图中呈现的表单。

<%= form_for(c, remote: true) do |k| %>
<%= k.check_box :recyclable, :class => "active_testdef_cl", :id => "item_recyclable_#{c.id}", 'data-recyclable' => c.recyclable %>
<% end %>

这是脚本。

<script>
     $(document).ready(function() {
       for (var i=0; i < 2; i++ ) {          
             $('#item_recyclable_'+i).on('change', function(){               
             var url='/items'
             var form_data = $('#cc_form').serialize;
             var checkbox_value = $('#item_recyclable_'+i).val();
                  $.ajax({
                  type: 'GET',
                  url: url,                  
                  data: checkbox_value,
                      beforeSend:function(){
                          // $('#test_message').innerHTML=("hello Christina");
                          //alert("hi m")
                      },                 
                    success: function(data) {
                        //$('#test_result').html(data);
                          document.getElementById('test_result').innerHTML=data; 
                    }
              });
              return false;
          });
       };
    }); 
</script>

1 个答案:

答案 0 :(得分:0)

Restful路由为各种请求分配“PUT”和“DELETE”方法,但实际上这些http方法往往不被使用,因为许多浏览器(可能只是某些版本的IE)不允许这些方法。所以,你实际上只发送GET和POST请求。

解决方法是发送一个额外的参数"_method"(注意下划线),您可以将其设置为“PUT”或“DELETE”。所以,如果你要添加

"_method": "PUT"

到你的ajax调用数据然后Rails应该将它作为PUT请求处理。当你定义form_data然后不使用它时,我真的不知道你的ajax中发生了什么。

如果您在rails中使用form_for帮助程序,并调用更新操作,请查看浏览器中呈现的html。你会看到一个带有输入的隐藏div,如下所示:

<div style="display:none;">
  <input type="text" name="_method" value="UPDATE">
</div>

这是Rails为您设置解决方法。见http://guides.rubyonrails.org/form_helpers.html#how-do-forms-with-patch-put-or-delete-methods-work-questionmark