Easy ajax forms with Rails 3 and jQuery

Here’s a little trick you can use to dynamically create remote forms with very little effort. This particular example shows how to create checkboxes that, when clicked, will submit the form and update the record in the database all without leaving the page.

First, we’ll create the form anywhere in our app:

http://gist.github.com/548387?file=index.html.erb

Note the remote => true form option and submittable css class.

In order to accept the form, we’ll need to create the corresponding controller action:

http://gist.github.com/548387?file=tickets_controller.rb

Then, we’ll use a little bit of jQuery that tells the browser to submit the form if any element with the class submittable is changed:

http://gist.github.com/548387?file=application.js

Finally, we may want to perform some action after the form is submitted:

http://gist.github.com/548387?file=update.js.erb

This is just a quick little example, but you can imagine how the technique could be applied to a lot of different things. Rails 3 and jQuery make it really, really easy to submit forms on the fly without reloading the page or even having the user click submit.

Published by

Trevor Turk

A chess-playing machine of the late 18th century, promoted as an automaton but later proved a hoax.

16 thoughts on “Easy ajax forms with Rails 3 and jQuery”

  1. Thanks for posting this tutorial.

    I followed you instructions, but it didn't work, it actually invoked the 'update' action, but then it tried to render the update.js.erb in the browser, any idea what's going wrong?

  2. Trevor, I've added that gem to my Gemfile.

    From the Firebug script console, I can see a warning messsage saying "Resource interpreted as document but transferred with MIME type text/javascript.", any idea about this?

    Thanks a lot

  3. Hao,

    Make sure you put return false; at the end of the js function.

    $('.submittable').live('change', function() {

    $(this).parents('form:first').submit();

    return false;

    });

  4. whoda thunk it! $('#form_id').submit() …so easy…once again proving the awesomeness of rails _and_ jQuery!

  5. Hi Trevor,

    Thanks for sharing this useful information. This helped me, when I was implementing auto-select drop down. (e.g. Country -> States -> Cities)

    Once again, much much thanks for sharing this.

    Best Regards
    Puneet

  6. Hello, Trevor.

    I used your concept successfully with jQuery 1.6 but it broke after updating to version 1.6.1. Do you have any idea why?

Comments are closed.