CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Leo
Leo

Reputation: 525

How to trigger change event for Chosen (jQuery)

Before I click reset button I choose "Company" in Chosen (dropdown list). The event occurs normally after I click reset. I choose "Company" again but event change in dropdownlist doesn't occur.

Could anyone tell me how to trigger the change event for dropdownlist after clicking reset button and then the same element?

The code I have so far:

$("#mainMenu").change(function(e){
    e.preventDefault();
    loadFirstManu(true);
});

Code for the reset button:

$("#btn_reset").click(function() {
  CKEDITOR.instances.ckeditor.setData('');
  $('.mchosen').each(function() {
     $(this).val('').trigger('liszt:updated');
     $('#submenu').attr('disabled', 'disabled').html('');
     $('#secondsubmenu').attr('disabled', 'disabled').html('');
     $('#s-menu').removeClass('required').html('');
     $('#secondsubmenu').removeClass('validate[required]');
     $('#tabmenu').attr('disabled', 'disabled').html('');
     $('#tab').removeClass('required').html('');
  });

});

Upvotes: 23

Views: 62331

Answers (6)

Alexander
Alexander

Reputation: 1263

If i need just to refresh value in chosen select - .trigger('chosen:updated') is enough. But if I have change handler and want it to be called - i need to do .trigger('chosen:updated').change()

Upvotes: 10

bonyiii
bonyiii

Reputation: 2891

This is what i figured out:

$('#my-select').val(5).trigger("liszt:updated")

liszt:updated is no longer working in new version of chosen instead use below as Alexandru Cojan's answer suggesting 

 trigger("chosen:updated");

Upvotes: 31

Alexandru Cojan
Alexandru Cojan

Reputation: 206

for newer version of chosen the event is "chosen:updated"

$(selector).trigger("chosen:updated")

Upvotes: 10

mohan.gade
mohan.gade

Reputation: 1105

If I am not wrong to understand you then you want to trigger the event change after click on the reset button. you can do this by simply adding one line to your code //code

     $("#btn_reset").click(function(){
       // your code here
       $("#mainMenu").trigger('change'); 
       //you can write this as per your requirements ie. at start or end.

      });

Upvotes: 0

apoq
apoq

Reputation: 1454

Maybe you should try using .on, as your $('#mainMenu') may have changed somewhere (Can't say without an example). Try doing this:

$("body").on('change','#mainMenu',function(){ 
  ...
});

or any parent selector instead of "heavy" body

Upvotes: 0

Shehabic
Shehabic

Reputation: 6877

I don't know if this is your case or not, but your code above should work, 

$("#mainMenu").change(function(e){
        e.preventDefault();
        loadFirstManu(true);
    });

but please notice that "change" event occurs on most browsers when you unfocus the select input

So when you click reset, just before executing the reset action the onchange is triggered.

Now try clicking outside the select input after changing the selection and see if it still works or not

Upvotes: 0

Related Questions