Ajax in Rails Example

Recently I had to make my first single page rails application.

What this means in short, is that my basic CRUD operations had to be done without triggering a page refresh.

In this blog I’ll give an example of how I accomplished this using the create action.

A standard create action in a Rails app looks something like this:

def create
@blog = current_user.blogs.build(blog_params)
if @blog.save
redirect_to blog_path(@blog)
else
render :new
end
end

Set the @blog instance variable, then add in some logic to account for either a successful save to the database and redirecting to the @blog show page, or an unsuccessful save and rendering the new blog form.

On the view for a new blog, usually you’ll either have a new.html.erb page or some sort of _form partial that you use for both edit and new actions.

While you still may use a form partial, the type of form you use will have to be altered a bit.

The way I chose and what I think is the simplest way ( in Rails 6 at least, possibly in other versions, not entirely sure) is to just use a form_with.

The default request with a form with is an ajax or asynchronous request meaning the form submission doesn’t trigger a page refresh.
Other than that, the rest of the from is the same as a normal form_for.

Now back to the controller.

Since you’re not rendering a new page or refreshing the current one, you will have to use some javascript/ jquery to handle how the actual changes you’ve made display themself on the page.

First, in your create action you need to add a respond_to block like so:

def create        
  @lead = Lead.new(lead_params)               
  respond_to do |format|            
    if @lead.save                
       @lead.send_sms(@lead.clean_number, @lead.note)                         format.js           
    else                
format.js                
format.json { render json: @lead.errors, status: :unprocessable_entity }            
end        
end    
end

The respond_to block allows the results of your create action to be formatted and displayed using the specifications you set; in this case, javascript(format.js).

In the views/leads (or whatever your model name is), you need to make a create.js.erb file.

This file is where you write the javascript/ jquery to control the display on the webpage.

Here is an example:

$("#myNewLead").modal('hide');
$(".first_name").val('');
$(".last_name").val('');
$(".phone_number").val('');
$(".note").val('');
$('table#lead-table tbody').append("<%= j render @lead %>")

First, I grab the lead form by it’s ID using jquery ($(#myNewLead) ) and hide the modal (bootstrap feature I used to display the form).

Then, as may be obvious, I grab the attribute classes from the form(.first_name, .last_name, .phone_number, .note) and reset their respective values to empty strings so that once the new lead is saved the form is ready to be used again for a new lead.

Finally I grab the table that is displaying my leads and append the new lead to it.

You’ll notice that I used erb tags that look almost exactly like the way they are used in a normal html.erb file. Note the “j”. When embedding ruby in a js.erb file, in order to escape the javascript and read the ruby, you must prepend the ruby with javascript or j for short.