rails_jquery_ajax.md

jQuery and jQuery-ujs

When using Rails 3.0 and later we already get jquery-rails for free. Look in the gemfile and you'll see:

gem "jquery-rails"

You can view the full documentation here: source: https://github.com/indirect/jquery-rails

If you take a look in APP_DIR/app/assets/javascripts/application.js, you'll notice the following lines of code:

//= require jquery
//= require jquery_ujs

This includes the jquery and jquery_ujs libraries into your Rails app.

####What is jquery_ujs? Unobtrusive JavaScript

UJS simply means the js logic is kept separate from your html.erb files, as opposed to writing inline js calls.

Here's a simple example: (Here's what's in your .html.erb file;)

<a href="#" data-confirm="Are you sure?">I want to code for 20 hrs today.</a>

jquery_ujs will convert the data-confirm attribute into a JS confirmation popup. No other js code needs to be written; this happens automatically.

Check this link out for a list of all the supported ujs attributes: https://github.com/rails/jquery-ujs/wiki/Unobtrusive-scripting-support-for-jQuery

Another commonly used attribute is data-method; this specifies the method we are used to typing in a traditional HTML form. Example:

<a href="..." data-method="delete" rel="nofollow">Delete this entry</a>

---

Ajax

Sending requests via AJAX is a breeze in Rails. All we need to do is include the following into our form_for call:

<%= form_for(@comment, remote: true) do |f| %>
  <%= f.label :text %>:
  <%= f.text_field :text %><br />
  <%= f.submit %>
<% end %>

In the controller that we are using, we have to make sure that we can send a js response. By Rails convention we will have to create a js.erb file with the appropriate HTTP method name in the views folder. Here's an example for the Post model:

app/controllers/comments_controller/

def create
  @comment = params[:text]
  
  respond_to do |format|
    format.html { redirect_to comments_url }
    format.js
  end
end

So we have specified how we want the html portion handled, and the javascript request.

Now all we have to do is write the js that will this request. By convention, this file has to end with .js.erb and have the name of the HTTP action being performed.

app/views/comments/create.js.erb

$('body').append('<%= @comment.text %>');

The nice about keeping the js in an .erb file like this, is that we have access to the instance variables.

Other useful resources:

• http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html
• http://railscasts.com/episodes/136-jquery-ajax-revised (must be a subscriber to watch)