Question

I have a javascript file for the cascading dropdown boxes loading from different models. But I dont know how to include into the dropdown list.

Form:

<% content_for :javascript do %>

var master_surveys = <%= 
 Condition::MasterSurvey.all.map {|ms| {id: ms.Master_Survey_Code, to_s: ms[:Master_Survey_Name]}}.to_json.html_safe
%>

var elements = <%= elements = Hash.new { |hash, code| hash[code] = [] }
Condition::Element.all.each {|e| elements[e.Master_Survey_Code] << {id: e.Element_Code, to_s: e.Element} }.to_json.html_safe
%>

var sub_elements = <%= sub_elements = Hash.new { |hash, code| hash[code] = [] }
Condition::SubElement.all.each {|s| sub_elements[s.Element_Code] << {id: s.Sub_Element_Code, to_s: s.Sub_Element} }.to_json.html_safe
%>

var materials = <%=
materials = Hash.new { |hash, code| hash[code] = [] }
Condition::RenewSchedule.all.each {|rs| materials[rs.Sub_Element_Code] << {id: rs.Material_Code, to_s: rs.Material} }.to_json.html_safe
%>

$(document).ready(function(){
 $('select#enr_rds_surv_rdsap_xref_master_survey').chainedTo('select#enr_rds_surv_rdsap_xref_Element_Code');
});
<% end %>

<%= form_for(@enr_rds_surv_rdsap_xref) do |f| %>
  <% if @enr_rds_surv_rdsap_xref.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@enr_rds_surv_rdsap_xref.errors.count, "error") %>:</h2>

      <ul>
      <% @enr_rds_surv_rdsap_xref.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

    <div class="field">
      <%= f.label :Master_Survey %><br/>
      <%= f.select :master_survey, Condition::MasterSurvey.all.map{|e| [e.Master_Survey_Code]}, { :prompt => 'Please Select' }  %>
    </div>


    <div class="field">
      <%= f.label :Element_Code %><br/>
      <%= f.select :Element_Code, Condition::Element.all.map{|e| [e.Element, e.Element_Code]}, { :prompt => 'Please Select' } %>
    </div>

    <div class="field">
      <%= f.label :Sub_Element_Code %><br/>
      <%= f.select :Sub_Element_Code, Condition::SubElement.all.map{|e| [e.Sub_Element, e.Sub_Element_Code]}, { :prompt => 'Please Select' } %>

    </div>  

    <div class="field">
      <%= f.label :Material_Code %><br/>
      <%= f.select :Material_Code, Condition::RenewSchedule.all.map{|e| [e.Material]}, { :prompt => 'Please Select' } %>
    </div>

  <div class="actions">
    <%= f.submit 'Save'%>
  </div>
<% end %>

So, The above javascript file collect the data from the parent. In the form, I created a dropdown list statically loaded the data from the database. I want to include the javascript to loaded automatically into the dropdown list dynamically.

Thanks in advance!!!!

Answer 1

I usually do it by Ajax and partials(or page, up to you.), not nice but might be help?

Bind change even on your parent selects. like

$("#parent_select").change(function(){
    $.ajax({
        url: '/parents/'+$(this).val()+'/childs/',
        complete: function(data){
            $('#children_select').html(data);
        }
    })
});

And in your child controller render a partial(or page) with only contents of options of selected children. like:

<%children.each do |child|%>
<option value='<%=child.id%>'><%=child.name%></option>
<%end%>