Error while rendering partial using escape_javascript in Rails?

Question

I have a Search tab in my Rails application which displays this form:

search/_form.html.erb

<%= form_for :anything, remote: true, html: { id: 'search_form' } do |f| %>
<div class="form-border">
  <div class="container-fluid"><!-- Row 2 -->
    <div class="row">
      <!-- 1. Add "Entity" multiselect dropdown to the form -->
      <div class="col-lg-4" id="userFormColumn2">
        <div class="form-group">
          <br/> <br/>
          <b><%= label_tag "Entity" %><br/></b>
          <%= select_tag(:search_entity, options_for_select(Account.uniq.pluck(:entity)), :multiple => true) %>
          <br/><br/>
        </div>

        <!-- 2. Add "Financial Institution" multiselect dropdown to the form -->
        <div class="col-lg-4" id="userFormColumn1">
          <div class="form-group">
            <%if(!@search_financial_institutions.blank?)%>
            <%= f.label :financial_institution %>
            <br/>
            <%= f.select :search_financial_institution, options_for_select(@search_financial_institutions.collect{ |f| [f.financial_institution, f.financial_institution] }, 1 ), {}, { id: 'search_financial_institution' } %>
            <%else%>
            <%= f.label :financial_institution %>
            <br/>              
            <%= f.select :search_financial_institution, options_for_select([['-Select-', '']]), {}, { id: 'search_financial_institution', class: 'input_form' } %>
            <%end %>
          </div>  
        </div>

      </div>
    </div>
  </div>
<%end%>


<!-- Javascript code to handle events for dropdowns in the above form-->

<script type='text/javascript'>
  /* When user changes value of "Entity" dropdown, do the needful to update
   * the "Financial Institutions" dropdown
   */
   $(document).on("change", "#search_entity", function(event){
    $.ajax('update_search_financial_institutions', {
      type: 'GET',
      dataType: 'script',
      data: {
        search_entity: $("#search_entity").val()
      },
      error: function(jqXHR, textStatus, errorThrown) {
        return console.log("AJAX Error: " + textStatus);
      }
    });
  });
</script>

As you can see above, we have 2 dropdowns - when value of first (Entity) dropdown is changed, the value of 2nd (Financial Institution) dropdown should be modified based on the selection of 1st dropdown

This is my routes.rb entry:

routes.rb

  get "/update_search_financial_institutions" => "search#update_financial_institutions", :as => :update_search_financial_institutions

This is my controller function that would be called when value of 1st dropdown changes:

search_controller.rb

  def update_financial_institutions
    logger.info "SearchController update_search_financial_institutions"

    @search_financial_institutions = Account.where(:entity => params[:search_entity])
    render :partial => 'search/update_financial_institutions.js.erb'
  end  

These are my related partials:

search/update_financial_institutions.js.erb

$("#search_financial_institution").empty().append("<%=escape_javascript(render(:partial => 'search/empty')) %>").append("<%=escape_javascript(render(:partial => 'search/financial_institution', :locals => {:institutions => @search_financial_institutions} )) %>");

search/_financial_institution.html.erb

<option><%=institutions.financial_institution%></option>

I get this error when the last partial shown above is executed:

The Error

ActionView::Template::Error (undefined method `financial_institution' for #<Account::ActiveRecord_Relation:0x00007f65fb49a1c0>):
    1: <option><%=institutions.financial_institution%></option>

app/views/search/_financial_institution.html.erb:1:in `_app_views_search__financial_institution_html_erb___881295623429985414_70037991679400'
app/views/search/_update_financial_institutions.js.erb:1:in `_app_views_search__update_financial_institutions_js_erb___1405969071861178528_70037991897300'
app/controllers/search_controller.rb:15:in `update_financial_institutions'

But when I inspect @search_financial_institutions in my search_controller, I see that the column named financial_institution VERY MUCH EXISTS in it.

Then why am I getting this error?

Answer 1

Your @search_financial_institutions variable is an Active Record relation, a collection of records. You're trying to call financial_institution on that collection, and the collection doesn't respond to that method, the individual records in that collection do.

If you want to display every record in your collection, try changing your search/_financial_institution.html.erb file to:

<% institutions.each do |institution| %>
  <option><%=institution.financial_institution%></option>
<% end %>