Question

How does one reset a Chosen plugin field after resource is created by Javascript?

I create a dog and can get the regular form fields to reset but not the select menu using the Chosen plugin:

dogs/create.js.erb

$('#dogs').prepend('<%= escape_javascript(render(@dog)) %>');
$('.add-dog-form > form')[0].reset();

This is successful reset, just not with the chosen menu which is called from my application.js:

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

Than my form:

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

So again, how does one reset a Chosen plugin field after resource is created by Javascript?

Answer 1

Try this:

dogs/create.js.erb

$('#dogs').prepend('<%= escape_javascript(render(@dog)) %>');
$('.add-dog-form > form')[0].reset();
$('.category-select').chosen().trigger("liszt:updated");

You basically have to trigger the reset again inside create.js.erb.