Can't get check box options to change depending on value of collection_select in a rails 3.2 form

Question

I have a form in rails 3.2 for creating users in a company. Each company has sites. A site is assigned to a user via a collection_select, and then each site has a number of departments which are selected using check boxes. A user belongs to a site and can belong to many departments from that site.

I need the department check box options to change dependant on the selected value in the sites collection_select.

I have been trying to do this by using :onchange of the collection_select to call a partial containing the departments. I've managed to get this to work but only displaying all departments for the company. Not departments for each individual site. I don't understand how to pass the selected site to the partial so it can return the correct departments (if this is even possible).

My code so far is:

Form:

    <%= form_for @user, :url => front_admin_users_path do |f| %>
      <%= devise_error_messages! %>

      <div><%= f.label :email %><br />
      <%= f.email_field :email %></div>

      <%= f.collection_select :role, User::ROLES, :to_s, :humanize %>

      <%= f.collection_select :site_id, current_user.company.sites.all, :id, :name, {}, :onchange => "jQuery.get('/load_department')",  :remote => true  %>

      <div id="department_frame"></div> 

      <div><%= f.label :password %><br />
      <%= f.password_field :password %></div>

      <div><%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation %></div>

      <div><%= f.submit "Sign up" %></div>
    <% end %> 

users_controller.rb:

     def load_department
       respond_to do | format |  
         format.js {render :layout => false}  
       end
     end

load_department.js.erb:

    $("#department_frame").html( "<%=j render(:partial =>"department") %>" );

_department.html.erb:

    <% current_user.company.sites.each do |site| %>
<% for department in site.departments %>
    <%= check_box_tag "user[department_ids][]", department.id, current_user.department_ids.include?(department.id) %>
    <%= department.name %>
<% end %>

I have googled for days trying to find the solution but can't find exactly what I need. The nearest thing I've found is Ryan Bate's dynamic collection selects revised using the grouped_collection_select method (which I've used in another part of the project), but this doesn't seem to deal with select boxes. Any help would be appreciated. Thanks.

Answer 1

You could try passing the site_id as a parameter in the URL to the AJAX call and then read that value off in the controller. In the controller method, you can also then get the list of departments for that particular site and then pass that off to the view that is being rendered.

I have edited the relevant parts of the code to explain what I mean better. Hopefully this makes sense :)

Form

<%= f.collection_select :site_id, current_user.company.sites.all, :id, :name, {}, :onchange => "jQuery.get('/load_department?site=' + $('#user_site_id').val())",  :remote => true  %>

users_controller.rb:

def load_department
    site = params[:site]
    @departments = Site.find(site).departments

    respond_to do | format |  
        format.js {render :layout => false}  
    end
end

_department.html.erb:

    <% for department in @departments %>
        <%= check_box_tag "user[department_ids][]", department.id, current_user.department_ids.include?(department.id) %>
        <%= department.name %>
    <% end %>