Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rails: jQuery & AJAX Tutorial

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:

@ahnbizcad

This comment has been minimized.

Copy link

commented Jul 2, 2014

I think it would be good to add another example at the end if you wish to run a js that isn't named the same as your action.

http://stackoverflow.com/questions/23418039/rails-how-to-choose-which-js-file-a-controller-action-to-render

@tnt501muzinjomane

This comment has been minimized.

Copy link

commented Oct 23, 2014

Can you guys please upload a detailed article of Ruby and ajax

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.