How to have a checkbox fire an ajax call when checked or unchecked in Rails3?

Question

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.

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

This is the generated 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.

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.

Answer 1

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();
});