Pages

Thursday, December 3, 2015

A small trick to use AJAX with Rails

Reloading the whole page at every new request is not a good solution sometimes. But that's exactly what Rails does by default, as we all know. Ajax, as always, is a good solution to prevent this and Rails has its way to use Ajax.

I'm going to talk here about another way to use ajax inside rails, circunventing a small problem.

Let's assume I have a fragment like this

app/views/customer/fragment.html.erb<div> <h1>Just a small test</h1></div>
and I what this to be displayed inside a certain area in my page whose id is "ajax-content-area". Something like this.

Let's also assume main_customer_area.html.erb is already in my screen. It's been renderized by a call to customer#main_customer_area, according to Rails standards. Now I want to call my fragment.html.erb and place it inside the corresponding <div>. For doing so I create a route:

Now thar we are ready, when you click the button in main_customer_area, something really bad happens!

Your fragment really appears, but it comes wrapped in the main layout!

As you said nothing, Rails will proceed ad always. It will receive the ajax request for '/customer/ajax/area'; will validate the route and, as said in config/routes.rb, will invoke method fragment at Customer controller. the method says nothing, so Rails will follow its usual procedures. Will search for a view named fragment.html.erb inside app/views/customer/. It is there and then Rails will render it inside the main layout and send it back to browser. Ajax will receive it and put it inside the desired <div> object.

Everything all right, but not what you wanted in the screen. Yeah... because your fragment will be wrapped by the mais layout! You'll have it as a copy of you page inside your page. Banners, menus... all pieces inside your main layout will duplicate.