如何有一个复选框触发一个Ajax调用在Rails3选中或取消选中时？ [英] How to have a checkbox fire an ajax call when checked or unchecked in Rails3?

问题描述

在我Rails3应用程序中，我有一组复选框的任务列表。我想火了Ajax调用返回到服务器时的其中一个复选框被选中或取消选中。

In my Rails3 application, I have a group of check boxes for a list of tasks. I'd like to fire off an ajax call back to the server whenever one of the check boxes are checked or unchecked.

这code是一个更大的组成部分：

This code is part of a much larger form:

<% @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>

如果我加在里面工作没有任何问题的形式提交按钮，但这并不看起来非常有吸引力。

If I add a submit button in the form it works without any problem but this doesn't look very appealing.

该是我妄图触发轨提交code中的复选框被选中时。父（形式）没有找到。产生一个JavaScript错误对象＃有没有方法'父'。

The 'onclick="$(this).parent().trigger('submit.rails');"' is my vain attempt to trigger the rails submit code when the check box is checked. The parent (the form) is never found. A javascript error is generated "Object # has no method 'parent'".

我相信我是非常接近得到它想通了，但我显然失去了一些东西。

I believe I am very close to getting it figured out, but I'm obviously missing something.

推荐答案

添加一个类你的复选框，删除突兀的onclick和使用jQuery火的形式提交不引人注意。

Add a class to your checkboxes, remove the obtrusive onclick and use jQuery to fire the form submit unobtrusively.

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

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

这篇关于如何有一个复选框触发一个Ajax调用在Rails3选中或取消选中时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！