Ajax on Rails step by step

My previous post about Ajax was aimed to people who knows how to actually make an Ajax solicitation, but this is not the case for people who are beginning. So, I’ll explain better how to do this. I’ll teach it using CoffeeScript and JSON, but you are free to trade technology as much as you want (using Javascript and XML, for example).

What is an Ajax solicitation?

I’m going to be really objective here: an Ajax solicitation happens when you want to request some data from the server (or send it) without reloading the page, and process it with a Javascript callback.

For doing this, you must do three things:

  1. Your server must provide the data via HTTP;
  2. You must make a solicitation;
  3. You must have a callback function for when the solicitation arrives

Provide data via HTTP

That’s really simple. The server does not care if the solicitation is Ajax or not, so every data the server provides you can be retrieved in Ajax. For example, let’s say you have this controller:

class FriendsController < ApplicationController
  def show
    @friend = Friend.find(params[:id])

    respond_to do |format|
      format.html
      format.json { render json: @friend }
    end
  end
end

You can retrieve a JSON representation of the friend with id 1 with “GET /friends/1.json”. It doesn’t matter if you requested it from a regular link or an Ajax link, the server will send you the same JSON.

So, it’s really easy on the server side: you can simply remain with your current controllers. At most, add JSON representations to your resources.

Make a solicitation

Generally, an Ajax solicitation is more confuse and obscure. Not on Rails. If you want a link to make an Ajax solicitation, you just have to add the “remote” attribute to it.

For example, if you want to make a link to make an Ajax request from “/friends/1.json”, simply do this:

<%= link_to "Awesome ajax link!", "/friends/1.json", remote: true, id: "ajax_link" %>

And that’s it! You have a Ajax link! It doesn’t do anything yet, but it will on the next step.

I added the “id” to the link so I can pick it easier with jQuery. But you don’t need to, if you want to make it another way.

Make a callback function

Ok, now the “difficult” part. When the response from the solicitation comes, you have to do something with it. But how do you know when the moment came?

You don’t. But the browser does. So tell the browser to call a function when the solicitation comes:

$(document).ready ->
    successCallback = (e, xhr, settings) ->
        myData = jQuery.parseJSON(xhr.responseText)
        # Do whatever you want here. Scramble your DOM, make an alert.
        # Everything you need is in the myData variable
    $('#ajax_link').bind("ajax:success", successCallback)

Ok. That’s not so difficult.

And this is not everything! You can make POST, PUT and DELETE via Ajax, too! Actually, you can do everything! And you do not need to change a lot of things on this tutorial, only how you’ll handle the data you are sending.

Advertisements

One thought on “Ajax on Rails step by step

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s