Executing action with Ajax in RoR, and modifying html without refreshing the page

Ajax in Ruby on Rails

 

In index.html.erb we produce a link that triggers an ajax action when clicked by means of :remote => true. In this example the entity or model is Day and the action is total.

Notice that we render day.id as id for the html element we want to manipulate. This is how we could identify and work with that specific element (any element in the identified row).

	…
	<tr id="<%= day.id %>">
	…
	<td><%= link_to 'Total', total_day_path(day), :remote => true %></td>
	…

view raw

index.html.erb

hosted with ❤ by GitHub

 

Ajax response

 

Let’s look at myentity_controller.erb. There we got the repond_to block and the condition format.js {}. This indicates that javascript will be sent as response and the correspondent code must be included in a js.erb view with the name of the action (e.g. myaction.js.erb).

	…
	def myaction
	…
	respond_to do |format|
	format.js {}
	end
	end
	…

view raw

myentity_controller.erb

hosted with ❤ by GitHub

 

In myaction.js.erb we can use JQuery to manipulate the dom and html elements with the powerful help of Rails bindings.

	$("tr#<%= @day.id %> td.oTotal").html("<%= @day.oTotal %>");
	$("tr#<%= @day.id %> td.dTotal").html("<%= @day.dTotal %>");

view raw

myaction.js.erb

hosted with ❤ by GitHub