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

在我的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错误“对象#没有方法’父级’”.

我相信我非常接近弄明白,但我显然错过了一些东西.

解决方法

在复选框中添加一个类,删除突出的onclick并使用jQuery以不显眼的方式触发表单.

<%= t.check_Box :provider_completed,{:class => 'checkable'} } %>

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

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

解决方法

猜你在找的jQuery相关文章