Ajax Forms with rails 4, :remote => true and JQuery - What are the Best Practices?

Question

I'm building a multi-part form with ajax in Rails 4, and I'd like to know if I'm doing this the correct way.

Here's the strategy I've used so far. My controller is called ajaxform.

At the top of my ajaxform_controller.rb, inside the class definition but not in a function, I have

respond_to :js

Stage One

The link from another view to this tool is routed with

get 'ajaxform' => 'ajaxform#stage_one'

The primary view, "stage_one.html.erb" contains the first part of the form, defined with a form_tag using the :remote => true option. The controller method of the same name is empty.

<%= form_tag("/stage_one_form", method: 'post', :remote => true) do %>
    <%= label_tag(:stage_one_data, "Stage one data: ") %>
    <%= select_tag(:stage_one_data, options_for_select([['Option1', :option1], ['Option2', :option2], ['Option3', :option3]], 1)) %>
    <%= submit_tag 'Next' %><span id="stage_two_waiting" style="display:none;"></span>
<% end %>
<br />
<span id="stage_two_form" style="display:none;"></span>

Hidden span tags: To the right of the "Next" button, there is a hidden span tag with an id attribute of "stage_two_waiting". When the form submits, routes.rb tells the application to go to stage_two_waiting, which will display a "please wait..." message inside the span tag. Below it, there's another hidden span tag with an id of "stage_two_form" — this is where stage two of our form will render after we get the data back from a query based on the stage one selection.

Stage Two

post 'stage_one_form' => 'ajaxform#stage_two_waiting'

stage_two_waiting is a partial view with two files: a stage_two_waiting.js.erb and a _stage_two_waiting.html.erb. An underscore at the beginning of the html.erb file indicates that it is a partial, but the .js.erb file of the same name does not have an underscore.

Here is stage_two_waiting.js.erb

$('span#stage_two_waiting').append("<%= escape_javascript (render partial: 'stage_two_waiting') %>");
$('span#stage_two_waiting').slideDown(350);
$("#trigger_stage_two").trigger("submit.rails");

The first two lines cause _stage_two_waiting.html.erb to render inside the span tag on the stage one form with a nifty slideDown effect. The third line triggers submission of a hidden form in _stage_two_waiting.html.erb, which passes the data along to the next form and routes to it:

<%= form_tag("/stage_two_waiting_form", :id => 'trigger_stage_two', method: 'post', :remote => true) do %>
    <!-- hidden field to pass the selected information from stage 1 on to stage 2-->
    <%= hidden_field_tag(:stage_one_data, params[:stage_one_data])%>
<% end %>

When the JQuery triggers that hidden form submission, routes.rb specifies the location of the actual stage two form itself:

post 'stage_two_waiting_form' => 'ajaxform#stage_two_form'

stage_two_form also has two files, stage_two_form.js.erb and _stage_two_form.html.erb. Before these files can render, the controller needs to place a REST call.

def stage_two_form
    stage_one_selected_option = params[:stage_one_data]    
    rest_response = `curl -k -X GET https://myrestservice.net/v1/myfunction/#{stage_one_selected_option}`

    #convert the rest response into an array of select list options for the stage two form
    @stage_two_options = Array.new
    @stage_two_options.push "parsed information from rest_response would go in here"

    respond_with(@stage_two_options) do |format|
      format.js
    end
end

stage_two_form.js.erb looks like this:

$('span#stage_two_form').append("<%= escape_javascript (render partial: 'stage_two_form') %>");
$('span#stage_two_form').slideDown(350);

The routing doesn't fire off this Javascript until the controller method is completely finished executing. Until then, the user just sees the "please wait..." message. Once the method is done, the javascript renders the form and its instance variable, @stage_two_options

  <%= form_tag("/stage_two_form", method: 'post', :remote => true) do %>
      <%= label_tag(:stage_two_data, "Available options based on stage one: ") %>
      <%= select_tag(:stage_two_data, options_for_select(@stage_two_options.transpose[0].collect)) %>
      <%= hidden_field_tag(:stage_one_data, params[:stage_one_data]) %>
      <%= submit_tag 'Next' %><span id="stage_three_waiting" style="display:none;"></span>
  <% end %>
  <br />
  <span id="stage_three_form" style="display:none;"></span>

The hidden_field_tag passes along the selection that was made all the way back in stage one, just in case it's needed by stage three. We could also write a second hidden_field_tag to pass the entire array of options that the controller method provided, if it will be needed later.

      <%= hidden_field_tag(:stage_two_options, @stage_two_options) %>

The route when posting this form looks like:

post 'stage_two_form' => 'ajaxform#stage_three_waiting'

Further stages

Stage three also has a total of four files, two for the waiting message and two for the form. They are stage_three_waiting.js.erb, _stage_three_waiting.html.erb, stage_three_form.js.erb, and _stage_three_form.html.erb. As before, the stage three waiting partial has a hidden form inside of it to pass along any needed params from stage two. Both stage three partials are rendered inside of the span tags in _stage_two_form.html.erb with JQuery append. This process can continue on for as many stages as needed.

Problems

It seems a little excessive to me that each "stage" of a multi-part form should rely on code that's located in up to five different places: two files for a "please wait..." message, two more files for the form itself, code inside the controller method. It also seems odd to need to pass data from one stage to the next as a parameter in hidden fields. It's unwieldy, and the form isn't working in safari 8 for some reason either, because it keeps routing as HTML and ignoring the JQuery.

Conclusion

I have a suspicion that I'm not doing this in the most graceful way — Any help would be appreciated.

The question is — Is it okay to pass data in params from one partial view to another to another using those hidden fields, or is there a cleaner way to do this that doesn't involve so many different files and hidden fields?

Answer 1

Global variables An alternative to passing parameters from partial view to partial view through the hidden fields would be to use global variables (beginning with $) in the controller. This makes them available to any of the controller's views and all their functions in the controller itself

ajaxform_controller.rb

def stage_two_form
    # define a global variable that we expect to use later from a different partial
    $global_selected_option = params[:stage_one_data]
    ...
end

def stage_three_form
    # the "stage_three_form" method still has access to the global variable
    $stage_three_option = $global_selected_option + ' In stage 3'
end

_stage_three_form.html.erb

<!-- _stage_three_form.html.erb and all other partial views have access to globals -->
<p>The original option was: <%= $global_selected_option %></p>
<%= form_tag("/stage_three_form", method: 'post', :remote => true) do %>
      <%= label_tag(:stage_three_selection, "#{$stage_three_option}") %>
      ...
<% end %>