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.

Are you sure you're running jquery and not prototype? Also, you should just be able to do .submit() instead of trigger('submit.rails')... I'm doing the same thing on my own site. — John Gibb
– John Gibb, Commented May 22, 2011 at 17:32
I'm at least trying to do jQuery. I've tryed a simple submit() and it does a regular post of the whole page, not a ajax post. — Russ Petersen
– Russ Petersen, Commented May 23, 2011 at 20:23

holodigm · Accepted Answer · 2011-07-29 02:12:22Z

6

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

answered Jul 29, 2011 at 2:12

holodigm

6138 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff Boshers · Accepted Answer · 2011-05-28 04:11:06Z

0

I think that if you use the standard .submit() but add .submit();return false; to it you'll have it.

answered May 28, 2011 at 4:11

Jeff Boshers

212 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related