Question

I am a newbie to Ruby on Rails . I have started working on RoR 1 month back.
My problem is:

I have a single table called syscode which has Id ,Name ,Desc and Parent_id .
For parent the Parent_id=0 and for childs they have parent_id according to the id of the parent.

I should have two select boxes in which the first select box should display the parents and the second select box should be dynamic i.e On click of parent in the first select box it should display the respective childs in the second select box.
I am successful in getting the parent_id on click of the options in the first select box.

The code i have tried is:

View : selectnew.html.erb

<div id="dvSelectSyscodeForm">  
  <%= form_for(@syscode) do |f| %>
    <div class="field">
      <label for="syscode_fksyscodeparent">Parent</label>
      <%= f.select :fksyscodeparent, Syscode.where("fksyscodeparent = '0'").map {|s| ["#{s.syscode}", s.id ]} %>
    </div>
    <div id="dvShowChild" style="display:none;">
      <div class="field">
        <label for="childSyscodes">Child</label>
        <%= f.select :fksyscodeparent, Syscode.where("fksyscodeparent = '0'").map {|s| ["#{s.syscode}", s.id ]} %>
      </div> 
    </div>
    <script type="text/javascript">
      var scode = [];
      function parentSelected() {        
        parent_id = $('#syscode_fksyscodeparent').val();
        alert(parent_id);          
      }    

      $(document).ready(function() {
        parentSelected();
        $('#syscode_fksyscodeparent').change(parentSelected);
      });

    </script>
    <% end %>  
    </div>
    <%= link_to 'Back', syscodes_path %>

Controller : selectnew

def selectnew
  @syscode = Syscode.new
  respond_to do |format|
    format.html # selectnew.html.erb
    format.json { render json: @syscode }
  end
end

Please help me guys … Thank You in Advance …!!

Answer 1

You need to do an Ajax call in your parentSelected function. The return from this Ajax call should be javascript that replaces the content of “dvShowChild” with new html content for the currently selected parent.

Alternatively you could do an ajax call that fetches html and then in the success callback replace the html value of “dvShowChild” with the html returned from the ajax call.