Chosen: Chosen:ready not firing

Created on 3 Apr 2014  ·  14Comments  ·  Source: harvesthq/chosen

I can't seem to get Chosen:ready to fire, can someone confirm if this usage is right or wrong?

jQuery('.chzn-select').on('chosen:ready', function () {
jQuery('li').ScrollText();
});

".chzn-select" is the class that chosen is bound prior to this code.

Thanks

Most helpful comment

I also ran into an issue where chosen:ready was not firing.

This did not work:

$('select')
    .chosen()
    .on('chosen:ready', function(){
        console.log('chosen:ready')
    });

but binding the event before instantiating chosen did work:

$('select')
    .on('chosen:ready', function(){
        console.log('chosen:ready')
    })
    .chosen();

All 14 comments

I guess you are simply binding your listener too late (if you bind it after chosen is ready, it will not see the event). Try binding the listener before applying chosen

Ah, that was part of the solution. there was also a line unbinding all events from chosen prior to setting it up which removed it. I believe the unbind line was added due to weirdness in asp.net and postbacks.

Thanks for quick reply.

Closed. :+1:

Sorry one other thing, I should in be able to get the chosen object in this function like below, is that correct?

jQuery('.chzn-select').on('chosen:ready', function (chosen) {
jQuery('li').ScrollText();
});

I'm looking to get the new element and do something to it when ready. Does the object chosen contain this? I see the obj has a result however this is always undefined.

Okay, I'm closing this again.

I worked out this will never work. As I wish to apply an event to each option in the chosen dropdown, however the issue is the options are not created until the dropdown is clicked on. Therefore I could possibly move my code into the "chosen:showing_dropdown" event.

the first argument of the event listener is always the event object. The parameters are the second argument: http://harvesthq.github.io/chosen/options.html#triggered-events

ah I missed the second parameter. Thanks.

You should bind your events using delegation (like the deprecated $().live()), because then the elements don't have to be present in the page when binding:

$('.chosen-select').on('click', 'li', handlerFunction);

More on event delegation here: https://learn.jquery.com/events/event-delegation/

I also ran into an issue where chosen:ready was not firing.

This did not work:

$('select')
    .chosen()
    .on('chosen:ready', function(){
        console.log('chosen:ready')
    });

but binding the event before instantiating chosen did work:

$('select')
    .on('chosen:ready', function(){
        console.log('chosen:ready')
    })
    .chosen();

the event is firing. But in the first case, your listener was probably registered after it was triggered

@stof Good clarification, thanks.

Just wondering but why are the list items created in the "showing_dropdown" event rather than the "ready" event?

The list items are not created in the chosen:showing_dropdown.

chosen:ready is triggered when the results are built and Chosen is ready to receive events, chosen:showing_dropdown is triggered after opening Chosen.

So what is it that you're wondering about? ;)

My "Chosen-Results" list is always empty until I trigger the dropdown to open. I found another way of doing what I was doing but was just little curious about how this was working.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexfrancavilla picture alexfrancavilla  ·  9Comments

asvetlenko picture asvetlenko  ·  3Comments

Scalamoosh picture Scalamoosh  ·  8Comments

vpode picture vpode  ·  5Comments

gandarez picture gandarez  ·  5Comments