So I’m working on a project and obviously I wanted to take advantage of the built in AJAX in rails using UJS. I for some reason couldn’t find a good tutorial on how to do it so I figured I would just write one instead. Here’s the basics of how I solved it. I’m going to assume a couple of things to start so that this tutorial stays within scope.

• A user model with an email address
• jquery-rails gem

To start we’re going to add the user to the view from the session. To do this in your controller add the following.

@user = session[:user]
if !@user
  redirect_to '/login_path'
end

Next we’re going to create the form, this is pretty simple but there are a couple of small things to watch out for. Here’s what it will look like.

<% unless @user.email %>
    <%= form_tag("/signup/email", :remote => true, :format => :js) do %>
        <%= text_field_tag :email, '', :size => 60 %>
        <%= submit_tag "Go!" %>
    <% end %>
<% end %>

So as you can see we’re adding a form to the view only if the user has not previously entered their email(unless @user.email). From there we create the form tag. There are 2 things to watch out for here. The first is :remote => true. This will tell rails that your form is going to be submitted via ajax and not via the regular redirection. The second is :format => :js. This will tell rails to use the respond to js block that we will discuss a little later on. As for a normal form the first argument is the controller/action path we want to take. For simplicity’s sake I just left it as a string(you could also use :controller/:action as well). Next we add a text field and a submit button and then close off our unless statement and out form block.

Now we need to add a signup controller so that the form has somewhere to submit the ajax request to. Do so by running the following command.

rails generate controller signup email

This will generate a brand new controller with a single action of email along with all the views/tests as well. Let’s open up our signup controller and add the following code.

def email
  @user = session[:user]
  if (@user)
    unless @user.email
      @user.email = params[:email]
        respond_to do |format|
            if @user.save
              format.js
            else
              @user.email = nil
              format.js { render :partial => 'error' }
            end
        end
    end
  end
end

Notice how we have a small piece of code in there(respond_to do |format|)? This code will tell rails which methods that it will respond to. In order for your method to respond to an ajax call you need to have format.js inside of your respond_to block just like above. Next is the sweet part. We go if @user.save render the default view for rails. Now this is not a traditional erb file. Let’s go ahead and create email.js.erb inside of our signup views directory. This will tell rails to respond to the ajax call using js instead of a plain erb file.

Inside of the else we need to make sure that we reset the user’s email to nil so that the following ajax calls work. Then we render a partial called error. This is also going to be a UJS file called _error.js.erb. Inside of these files you can do whatever you want as far as javascript/ruby go. You pass variables to the view the same way and access them using ruby inside the js.erb file and you can also perform JS functions on DOM objects that are back on the page that made the AJAX request.

Hopefully this helps anyone reading on figuring out how to use UJS in rails 3.1. As always, if you have any questions/comments feel free to post them in the comments below.