Question

I have the models Dog and Category with their forms being on the same page. I’m using the Chosen Plugin and when I add a category it doesn’t update the category select for the dog form. Both of them are remote forms and are created the same way so the new.js.erb and create.js.erb are basically the same:

pets/index.html.erb

<div class="tabbable">
   <ul class="nav nav-tabs">
      <li class="active">
         <a href="#tab1" data-toggle="tab">Dog</a>
      </li>
   </ul>
   <ul class="nav nav-tabs">
      <li class="active">
         <a href="#tab2" data-toggle="tab">Category</a>
      </li>
   </ul>
   <div class="tab-content">
      <div class="tab-pane active add-dog-form" id="tab1">
         <%= render "dogs/form" %>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane active add-category-form" id="tab2">
         <%= render "categories/form" %>
      </div>
   </div>
</div>

dogs/new.js.erb

$('.add-dog-form').html('<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: @dog })) %>');

dogs/create.js.erb

$('.add-dog-form').html('<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: @dog })) %>');

dogs/_form.html.erb

<%= form_for(@dog, :remote => true) do |f| %>
   <%= f.text_field :name %>
   <%= f.select :category_ids, Category.all.collect {|c| [c.name, c.id]}, {},
        { :multiple => true, :class => "category-select" } %>
   <%= f.submit %>
<% end %>

application.js

jQuery( function($) {
    // Chosen Select Menu
    $('.category-select').chosen().trigger("liszt:updated");
});

Anyone else work with this plugin and/or know how to update the select menu?

Answer 1

In application.js
Instead of:

$('.category-select').chosen().trigger("liszt:updated");

Use:

$('.category-select').trigger("liszt:updated");