在 Rails3 中选中或取消选中时，如何让复选框触发 ajax 调用？

Posted 2023-03-05

【中文标题】在 Rails3 中选中或取消选中时，如何让复选框触发 ajax 调用？

【英文标题】：How to have a checkbox fire an ajax call when checked or unchecked in Rails3?

【发布时间】：2011-08-30 05:58:03

【问题描述】：

在我的 Rails3 应用程序中，我有一组用于任务列表的复选框。只要检查或未选中其中一个复选框，我想从Ajax呼叫射回到服务器。

此代码是更大表单的一部分：

<% @provider.tasks_assigned.each do |task_assigned| %>
  <%= form_for :task_assigned, :url =>  :controller => "tasks_assigned", 
    :action => 'update' , :remote => true do |t|%>
    <%= t.hidden_field :id, :value => task_assigned.id %>
    <%= t.check_box :provider_completed, 
       :checked => task_assigned.provider_completed, 
      :onclick => "$(this).parent().trigger('submit.rails');"  %>
    <%= t.label :provider_completed, 
      task_assigned.task_desc.gsub(/(\n\r|\r\n|\n)/, '<br>').html_safe, 
      :style => "color: #666666; margin-top: 0px;" %>
    <br />          
  <% end %>
<% end %>

这是生成的html：

<form accept-charset="UTF-8" action="/tasks_assigned/update" data-remote="true"
  method="post">
  <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden"
    value="&#x2713;" />
    <input name="authenticity_token" type="hidden"
      value="jECJ4FkV48T5EgCEE0hhPvsbWjG+WGXn59L2knMv7No=" />
  </div> 
  <input id="task_assigned_id" name="task_assigned[id]" type="hidden" value="25" /> 
  <input name="task_assigned[provider_completed]" type="hidden" value="0" />
  <input id="task_assigned_provider_completed" name="task_assigned[provider_completed]"
    onclick="$(this).parent().trigger('submit.rails');" type="checkbox" value="1" /> 
  <label for="task_assigned_provider_completed" 
    style="color: #666666; margin-top: 0px;">abc</label> 
  <br />            
</form>
<form accept-charset="UTF-8" action="/tasks_assigned/update" data-remote="true"
  method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden"
      value="jECJ4FkV48T5EgCEE0hhPvsbWjG+WGXn59L2knMv7No=" />
  </div> 
  <input id="task_assigned_id" name="task_assigned[id]" type="hidden" value="24" /> 
  <input name="task_assigned[provider_completed]" type="hidden" value="0" />
  <input id="task_assigned_provider_completed" name="task_assigned[provider_completed]"
    onclick="$(this).parent().trigger('submit.rails');" type="checkbox" value="1" /> 
  <label for="task_assigned_provider_completed" 
    style="color: #666666; margin-top: 0px;">Provider completed</label> 
  <br />            
</form>
<form accept-charset="UTF-8" action="/tasks_assigned/update" data-remote="true"
  method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden"
      value="jECJ4FkV48T5EgCEE0hhPvsbWjG+WGXn59L2knMv7No=" />
  </div> 
  <input id="task_assigned_id" name="task_assigned[id]" type="hidden" value="22" /> 
  <input name="task_assigned[provider_completed]" type="hidden" value="0" />
  <input id="task_assigned_provider_completed" name="task_assigned[provider_completed]"
    onclick="$(this).parent().trigger('submit.rails');" type="checkbox" value="1" /> 
  <label for="task_assigned_provider_completed" 
    style="color: #666666; margin-top: 0px;">a<br>b<br>c</label> 
  <br />    
</form>

如果我在表单中添加一个提交按钮，它可以正常工作，但这看起来不是很吸引人。

'onclick="$(this).parent().trigger('submit.rails');"' 是我在选中复选框时触发 Rails 提交代码的徒劳尝试。永远找不到父级（表单）。生成一个 javascript 错误“对象 # 没有方法‘父’”。

我相信我已经很接近弄明白了，但我显然遗漏了一些东西。

【问题讨论】：

你确定你运行的是 jquery 而不是原型？另外，你应该可以做 .submit() 而不是 trigger('submit.rails')... 我在自己的网站上做同样的事情。

我至少在尝试做 jQuery。我尝试了一个简单的 submit()，它会定期发布整个页面，而不是 ajax 帖子。

【参考方案1】：

为您的复选框添加一个类，删除突出的 onclick 并使用 jQuery 触发表单提交。

<%= t.check_box :provider_completed, 
   :checked => task_assigned.provider_completed, 
  :class => 'checkable'  %>

$('.checkable').live('change', 
function() 
    $(this).parents('form:first').submit();
);

【参考方案2】：

我认为如果你使用标准的 .submit() 但添加 .submit();return false;到它你就会拥有它。