Question

I’m using Rails with jQuery, and I’m working on a page for a simple site that prints each record to a table. The only editable field for each record is a checkbox. My goal is that every time a checkbox is changed, an ajax request updates that boolean attribute for the record (i.e., no submit button).

My view code:

<td>
<% form_remote_tag :url => admin_update_path, :html => { :id => "form#{lead.id}" } do %>
   <%= hidden_field :lead, :id, :value => lead.id %>
   <%= check_box :lead, :contacted, :id => "checkbox"+lead.id.to_s, :checked => lead.contacted, :onchange => "$('#form#{lead.id}').submit();" %>
<% end %>
</td>

In my routes.rb, admin_update_path is defined by

  map.admin_update 'update', :controller => "admin", :action => "update", :method => :post

I also have an RJS template to render back an update. The contents of this file is currently just for testing (I just wanted to see if it worked, this will not be the ultimate functionality on a successful save)…

page << "$('#checkbox#{@lead.id}').hide();"

When clicked, the ajax request is successfully sent, with the correct params, and the action on the controller can retrieve the record and update it just fine. The problem is that it doesn’t send back the JS; it changes the page in the browser and renders the generated Javascript as plain text rather than executing it in-place.

Rails does some behind-the-scenes stuff to figure out if the incoming request is an ajax call, and I can’t figure out why it’s interpreting the incoming request as a regular web request as opposed to an ajax request.

I may be missing something extremely simple here, but I’ve kind-of burned myself out looking so I thought I’d ask for another pair of eyes. Thanks in advance for any info!

Answer 1

This question is related to this one, but the answer varies slightly. I had to create a new way to submit the form, since the default jQuery submit() method does not submit as a ‘script’ and certainly does not fire the code that Rails generates in the onsubmit=”…” handler via the form_remote_tag helper.

The solution was to create a new function as the linked answer suggests, but the contents are slightly different:

jQuery.fn.submitWithAjax = function() {
    jQuery.ajax({data:jQuery.param(jQuery(this).serializeArray()) + '&amp;authenticity_token=' + encodeURIComponent('<%= form_authenticity_token %>'), dataType:'script', type:'post', url:'/update'}); 
    return false;
};

This is brittle right now– notice that I insert rails’ form_authenticity_token into the Javascript, but really the method (post) and the url (/update) should also be generated rather than hardcoded.

Things are working A-OK now.