Search code examples
jqueryruby-on-railsajaxpartials

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


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?


Solution

  • 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);