How to have 2 chained ajax calls on the same form in Rails 3.2?

Question

There are 2 id fields on new form (@module_info_id (id1) and @module_action_id (id2)). Both id1 and id2 are dropdown menus with :collection on the form. When id1 is selected, id2 is filled based on the input of id1. When id2 is selected, then 2 text boxes are filled based on the input of id2. Here is the new.js.erb:

<% if @module_info_id > 0 %>  #id1
  $('#user_access_module_action_id').empty();
  $('#user_access_module_action_id').append('<option value=""></option>');
  <% @module_actions.each do |r| %>
    $('#user_access_module_action_id').append('<option value="<%=r.id%>"><%= "##{r.id},"+ ' ' + "#{r.name}," + ' ' + "#{r.data_resource.name}" %></option>');
  <% end %> 
<% end %>
<% if @module_action_id > 0 %>  #id2
  <% module_action = OnboardDataUploadx.module_action_class.find_by_id(@module_action_id) %>
  $('#user_access_action').val('<%=module_action.name%>');
  $('#user_access_resource').val("<%=module_action.data_resource.name%>");
<% end %>

The problem is that when id2 is changed, ajax will execute the id1 loop and remove the selection of the id2. The controller does not have memory of id1 and it does not know if the id1 is changed or not. Loop for id1 will be executed when id2 is changed. Is there any way we can skip the execution of loop for id1 when id2 is changed?

The jquery code for triggering change is:

$(function (){
    $('#user_access_engine_id').change(function(){
      $.get(window.location, $('form').serialize(), null, "script");
      return false;
    });
});

$(function() {
  $('#user_access_module_action_id').change(function (){
    $.get(window.location, $('form').serialize(), null, "script");
    return false;
  });
});

Answer 1

Fill the second select, and two text fields in change event of selects using jquery as the following:

When first select change:

$('#user_access_engine_id').change(function(){
  var val = this.val();
  if(val != null){
    $('#user_access_module_action_id').empty();
    $('#user_access_module_action_id').append('<option value=""></option>');
    <% @module_actions.each do |r| %>
      $('#user_access_module_action_id').append('<option value="<%=r.id%>">
<%="##{r.id},"+ ' ' + "#{r.name}," + ' ' + "#{r.data_resource.name}" %></option>');
    <% end %>;
  }
  //refresh select related to its type
  //as example chosen-select as the following
  $('.chosen-select').trigger("chosen:updated");
}

When the second select change:

$('#user_access_module_action_id').change(function (){
  var val = this.val();
  if(val != null){
    $('#user_access_module_action_id').append('<option value=""></option>');
  <% module_action = OnboardDataUploadx.module_action_class.find_by_id(@module_action_id) %>
    $('#user_access_action').val('<%=module_action.name%>');
    $('#user_access_resource').val("<%=module_action.data_resource.name%>");
  }
  //refresh select related to its type
});