Chosen: .trigger("chosen:updated"); does not work with recent versions of jquery.

Created on 15 Jan 2015  路  9Comments  路  Source: harvesthq/chosen

For example, I use the following code on the demo page http://harvesthq.github.io/chosen/ but with https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js instead of 1.6.4

<div>
  <script>
  function ins() {
    var ur = $('option[value="Uruguay"]');
    $(ur).attr("selected", true);
    $(".chosen-select").trigger("chosen:updated");
  };
  </script>
  <button id="ins" onclick="ins(); return false;">Insert</button>
</div>

If I click on the button first time, Uruguay gets selected. Then I delete Uruguay by clicking an 'x' at the label. Then I click on the button again, but this time it does not work, the option does not apper any more an the list of selected options. With jquery 1.6.4 (the version used in the demo page) it works fine.

The standalone example: https://github.com/brigadier/chosentest

Most helpful comment

This should work too:

$('.chosen-select').on('chosen:updated', function(event){
   // your stuff here
});

window.setInterval(function() {
  $('.chosen-select').trigger('chosen:updated');
}, 1000);

All 9 comments

I am having the same issue and I am using jQuery v1.11.1 and 1.3.0 version of chosen.js

Works on latest Chrome. Which browser are you using?

ok, I had a bit of code change and now it works on Firefox and Chrome.

My on change event was defined as

$('.chosen-select').on('change', function(event){
//What I should do 
});

And

setInterval(function() {
 $('.chosen-select").trigger("change"); //was ("chosen:updated");
}, 10000); //every 10 seconds
});

This should work too:

$('.chosen-select').on('chosen:updated', function(event){
   // your stuff here
});

window.setInterval(function() {
  $('.chosen-select').trigger('chosen:updated');
}, 1000);

I fixed the problem with

vals = ...; //read old selected options values, add new ones
$(select).val(vals);
$(select).trigger("chosen:updated");

It works in all browsers.

Going to close this issue then -- seems like it's not a bug.

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

Yesterday, $(select).trigger("chosen:updated"); is OK.But today it also doesn't work. The reason is the chosen had updated last night. So if you want to use the above code,you should make sure your chosen version is less than or equals "1.7.0".

I fixed the problem with

vals = ...; //read old selected options values, add new ones
$(select).val(vals);
$(select).trigger("chosen:updated");

It works in all browsers.

This solution is more reliable and does not require rebuilding the chosen again as proposed in one of stackoverflow's thread. Thanks.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

eduardokranz picture eduardokranz  路  6Comments

vpode picture vpode  路  5Comments

engintekin picture engintekin  路  8Comments

zerocrates picture zerocrates  路  7Comments

scottdoc picture scottdoc  路  7Comments