Complex Cascading Dropdown in Rails won't work in Edit Form

Question

I recently tried to implement a cascading dropdown into my application with this tutorial on petermac.com: http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/

The tutorial basically talks about doing a cascading dropdown, where every dropdown box is an a separate partial and gets loaded with an jQuery onChange event when the parent select is changed.

Now I got this to work without a problem. But actually my select boxes have quite complicate relationships between them.

So, the form I belongs to a Model called AuditFunction and as the name says is for auditing. Every audit has a source and a target, which can be compared via several commands. The source as well as the target are selected via 3 select boxes. The first box selects the type of database the field is in. The second box selects the table and then the third box selects the field. As the field box can contain thousands of options I tried to implement the cascading dropdown to make it easier for the user to select the field.

To give you an overview, this is what my actions look like:

# new.html.erb

<%= simple_form_for @audit_function do |f| %>
  <%= f.input :database_1, :as => :select, :collection => @databases, :include_blank => true %>
  <%= render :partial => 'databases_1'  %>
  <%= render :partial => 'fields_1'  %>
  <%= f.input :database_2, :as => :select, :collection => @databases, :include_blank => true %>
  <%= render :partial => 'databases_2'  %>
  <%= render :partial => 'fields_2'  %>
<% end %>

The javascript for this looks like this:

# jQuery

<script type='text/javascript' charset='utf-8'>
jQuery(function($) {
  // when the #country field changes
  $("#audit_function_database_1").change(function() {
    var database_1 = $('select#audit_function_database_1 :selected').val();
    if(database_1 == "") database_1="0";
    jQuery.get('/audit_functions/update_database_1_id_select/' + database_1, function(data){
        $("#database_1_id").html(data);
    })
    return false;
  });

})
</script>
<script type='text/javascript' charset='utf-8'>
jQuery(function($) {
  // when the #country field changes
  $("#audit_function_database_2").change(function() {
    var database_2 = $('select#audit_function_database_2 :selected').val();
    if(database_2 == "") database_2="0";
    jQuery.get('/audit_functions/update_database_2_id_select/' + database_2, function(data){
        $("#database_2_id").html(data);
    })
    return false;
  });

})

Now I'm only going to show you the partials for database_1_id and field_1_id, but they look the same as database and field 2.

# _databases_1.html.erb

<script type="text/javascript">
  jQuery(function($) {
  $("#audit_function_database_1_id").change(function() {
  var database_1_id = $('select#audit_function_database_1_id :selected').val();
  if(database_1_id == "") database_1_id="0";
  jQuery.get("/audit_functions/update_field_1_id_select/" + ("<%= params[:id] %>_" + database_1_id), function(data){
    $("#field_1_id").html(data);
  })
  return false;
  });
  })
</script>

<%= simple_form_for "audit_function" do |f| %>
  <% if params[:id] %>
<% if params[:id] == "imp" %>
  <%= f.input :database_1_id, collection: AdOriTbl.all.order(ori_filename: :asc).collect{ |a| [a.ori_filename,a.id]} %>
  <% elsif params[:id] == "ori" %>
    <%= f.input :database_1_id, collection: AdOriTbl.all.order(otb_filename: :asc).collect{ |a| [a.otb_filename,a.id]} %>
  <% elsif params[:id] == "mod" %>
    <%= f.input :database_1_id, collection: AdQryMod.all.order(qry_mod_text: :asc).collect{ |a| [a.qry_mod_text,a.id]} %>
  <% end %>
<% end %>
  <% end %>

And now the file containing the target field.

# _fields_1.html.erb

<%= simple_form_for "audit_function" do |f| %>
  <% if params[:id] %>
    <% if params[:id].gsub(/_{1}\d{1,}\z/, "") == " mod " %>
      <%= f.input :field_1_id, collection: AdQryFld.where(ad_qry_mod_id: params[:id].gsub(/\A\w{1,}_{1}/, "").to_i).order(order_id: :asc).collect{ |f| [f.qry_field_text,f.id]} %>
    <% else %>
      <%= f.input :field_1_id, collection: AdOriFld.where(ad_ori_tbl_id: params[:id].gsub(/\A\w{1,}_{1}/, "").to_i).order(id: :asc).collect{ |f| [f.otb_colhdg,f.id]} %>
    <% end %>
  <% end %>
<% end %>

The controller then contains all the actions triggered in the javascripts:

# audit_function_conroller.rb

def new
  authorize! :new, :audit_functions
  @audit_function = AuditFunction.new

  @functions = [[I18n.t("text sum"),"sum"],[I18n.t("text quantity"),"quantity"],[I18n.t("text largest_value"),"largest_value"],[I18n.t("text smallest_value"),"smallest_value"]]
  @databases = [[I18n.t("text original_database"),"imp"],[I18n.t("text archive_database"),"ori"],[I18n.t("text query_database"),"mod"]]
end

def update_database_1_id_select
  if params[:id] == "mod"
    type = "mod"
  elsif params[:id] == "ori"
    type = "ori"
  elsif params[:id] == "imp"
    type = "imp"
  end
  render partial: "databases_1", id: type
end

def update_field_1_id_select
  type = params[:id]
  render partial: "fields_1", id: type
end

Now, as messy as all of this looks, the good thing is that it gets the job done. And to clarify my MVC, these are the relations:

AdOriTbl has_many AdOriFlds
AdOriFld belongs_to AdOriTbl

AdQryMod has_many AdQryFlds
AdQryFld belongs_to AdQryMod

I hope the names don't bother you too much when reading this.

Now lets get back to the problem:

As I said this code works for creating a new object and everything is selected fine. But when I try to edit an object only the field with the database type (database_1 and database_2) are filled. The select boxes for the ID's of the databases are not rendered, while the boxes for the fields are. But all four ID fields are empty.

Now I already tried to fill the boxes by hand with a jQuery that basically looks similar to the ones I already have, but instead of getting triggered onChange, I trigger it when my audit_function has a database_id and render the select box and fill it with the value according value of database_id. This works as well.

The problem is that I can't do this with the field_id, because in the partial of database_1_id where the jQuery for the fields get triggered, I don't have the @audit_function object at hand and also it seems to interfere with the other javascripts.

Besides that I'd also like to think that there is a better way to do this, then my way. But I already tried other tutorials and ways and they either don't work when you don't have your straight-forward Country-State-City relationships or they don't work when editing.

So, any help would be really appreciated. Thanks!

Answer 1

I took the following tutorial as template to rewrite my cascading dropdown:

http://homeonrails.blogspot.de/2012/01/rails-31-linked-dropdown-cascading.html

So, now I throw all the different models into one array and filter it by appending names to the class, to differentiate not only by ID, but also by name. Also the jQuery Plugin chainedTo makes the code much more readable.

So, the controller looks now like this:

    @types_for_dropdown = [[I18n.t("text archive_database"),"ori"],[I18n.t("text query_database"),"mod"]]

@tables_for_dropdown = []
@ad_qry_mods = AdQryMod.all
@ad_qry_mods.each do |i|
  @tables_for_dropdown = @tables_for_dropdown << [i.qry_mod_text,"mod#{i.id}",{:class => "mod"}]
end
@ad_ori_tbls = AdOriTbl.all
@ad_ori_tbls.each do |i|
  @tables_for_dropdown = @tables_for_dropdown << [i.otb_filename,"ori#{i.id}",{:class => "ori"}]
end

@fields_for_dropdown = []
@ad_qry_flds = AdQryFld.all
@ad_qry_flds.each do |i|
  @fields_for_dropdown = @fields_for_dropdown << [i.qry_fieldname,i.id,{:class => "mod#{i.ad_qry_mod_id}"}]
end
@ad_ori_flds = AdOriFld.all
@ad_ori_flds.each do |i|
  @fields_for_dropdown = @fields_for_dropdown << [i.otb_fieldname,i.id,{:class => "ori#{i.ad_ori_tbl_id}"}]
end

And the form looks like this:

<%= content_for :head do %>
<script>
$(document).ready(function(){
 $('select#audit_function_database_1_id').chainedTo('select#audit_function_database_1');
 $('select#audit_function_field_1_id').chainedTo('select#audit_function_database_1_id');
 $('select#audit_function_database_2_id').chainedTo('select#audit_function_database_2');
 $('select#audit_function_field_2_id').chainedTo('select#audit_function_database_2_id');
});
</script>
<% end %>
<div class="grid-6-12">
  <%= f.input :database_1, label: I18n.t("field_label audit_function database_1"), hint: I18n.t("field_hint audit_function database_1"), as: :select, collection: @types_for_dropdown, include_blank: true %>
</div>
<div class="grid-6-12">
  <%= f.input :database_2, label: I18n.t("field_label audit_function database_2"), hint: I18n.t("field_hint audit_function database_2"), as: :select, collection: @types_for_dropdown, include_blank: true %>
</div>
<div class="grid-6-12">
  <%= f.input :database_1_id, label: I18n.t("field_label audit_function database_1_id"), hint: I18n.t("field_hint audit_function database_1_id"), as: :select, collection: @tables_for_dropdown, include_blank: true %>
</div>
<div class="grid-6-12">
  <%= f.input :database_2_id, label: I18n.t("field_label audit_function database_2_id"), hint: I18n.t("field_hint audit_function database_2_id"), as: :select, collection: @tables_for_dropdown, include_blank: true %>
</div>
<div class="grid-6-12">
  <%= f.input :field_1_id, label: I18n.t("field_label audit_function field_1_id"), hint: I18n.t("field_hint audit_function field_1_id"), as: :select, collection: @fields_for_dropdown, include_blank: true %>
</div>
<div class="grid-6-12">
  <%= f.input :field_2_id, label: I18n.t("field_label audit_function field_2_id"), hint: I18n.t("field_hint audit_function field_2_id"), as: :select, collection: @fields_for_dropdown, include_blank: true %>
</div>

This is really a nice solution and I can recommend it to everyone!