Easy ajax forms with Rails 3 and jQuery

by Trevor Turk

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.

Advertisement