Rails 4 rendering a partial with ajax, jquery, :remote => true, and respond_to

Question

It seems like rendering a page dynamically with AJAX in response to a submitted form is common. None of the other similar questions are focused around how to do this in a general way.

The best blog post I could find on the subject was here: http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

The question: How do I code my rails application so that I can trigger a partial view to load via AJAX when I submit a form or click a link?

Answer 1

Several things must be present for this to work, including the :remote => true flag on the triggering element, the respond_to :js flag in the controller's class definition, the route, the partial view, and lastly the jquery to actually render a dynamic partial must be contained in a separate .html.js file.

Examples below are for a fictitious "render_partial_form" method of the "someajax" controller.

1) Add a :remote => true flag to the triggering element
put the :remote => true flag on the link or form tag in your .html.erb file (view) for the element that you want to trigger the AJAX call, like

<%= form_tag("/someajax", method: 'post', :remote => true) do %>

with :remote => true, rails will not automatically switch views, which allows the JQuery to be run instead. This can be used with a form_tag, a link_tag, or other types of tags.

2) Add "respond_to :html, :js" at the top of the controller

At the top of your controller's class definition, you must now specify that the controller can respond to javascript as well as html:

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

In this example, there's a variable being passed from the controller into the view: an array of select list options called @array_from_controller.

3) Route the http verb to your controller's method

Since I wanted a POSTed form to trigger the AJAX call, I routed the post verb for my controller to the render_partial_form view.

post 'someajax' => 'someajax#render_partial_form

The controller method defined by def render_partial_form matches with the name of the view, _render_partial_form.html.erb so there is no need to call a render action from the controller.

4) Create the partial view
The partial view should have the same name as your controller method and begin with an underscore: _render_partial_form.html.erb

<h3>Here is the partial form</h3>

<%= form_tag("/next_step", method: 'post') do %>
    <%= label_tag(:data, "Some options: ") %>
    <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %>
    <%= submit_tag('Next') %>
<% end %>

5) Create the JQuery file

JQuery statements trigger the form's rendering. Replace "render_partial_form" with the actual name of your controller method and partial view. The slideDown effect is optional "eye candy". Create a file with a .js.erb extension, and the same name as your controller:

render_partial_form.js.erb

$('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>");
$('#render_partial_form').slideDown(350);

Answer 2

You should use JS views (which have "js.erb" extension), something like "create.js.erb" for create controller action. Then, add format.js to the respond_to do |format| ... end block. And add remote: true parameter to your form. Notice: js.erb should include Javascript code you need to be included, like:

$("tbody#items").append("<%= j render(partial: 'your_partial_path') %>")