SamSamskies/rails_jquery_ajax.md

## rails_jquery_ajax.md

      
    Raw
  

              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)