element.chosen is not a function

[estvmachine]

My implementation:

The controller...

    angular.module('EXAMPLE').controller('exampleController', [$scope', 'localytics.directives' ] 
                         ....
                     $scope.colors=['blue', 'red','yellow'];

        .....

The view...

<select multiple chosen
                ng-disabled= "true"
                allow-single-deselect="true"
                data-placeholder="Selecciona la operacion..."
                ng-model="searchParams.colors"
                ng-options="oper for oper in colors"
                   style="width: 200px;"
   >
</select>

But i got this error

[Phoenixmatrix]

Did you make sure chosen itself is included on your page? (not just the angular piece)

[estvmachine]

Yeah of course, i installed with bower and i added to my html

[edorgeville]

Got same error in same context. Also, chosen is indeed loaded, as typing $('select').chosen() in console "works".

[edorgeville]

Welp, I fixed it on my side. Just import jquery BEFORE angular.

[estvmachine]

Im can only trying until this monday xd, thanks i dont try to play with the imports.

[martsie]

Switching the order fixed it for me. jQuery and chosen must be loaded before Angular.

[emitategh]

Not working for me :S

[edorgeville]

@estvmachine did my suggestion fix your issue ?
@emitategh, are you getting the same error ? Can you give us some more details ?

[emitategh]

Yes, i'm getting element.chosen is not a function.

I have a controller with a variable called "$scope.clientes" , that variable get its data from a service, it may be that the directive is applied before the variable has data and is not updated when data is avaialble.

Is that possible?

[edorgeville]

Haven't had any issue with chosen and empty arrays. And it surely wouldn't return this kind of error.

[estvmachine]

@th3m4ri0 yes, im ok with this solution, you can close this issue.

[edorgeville]

I am not owner of the repo, only you and an owner can close the issue

[jlizanab]

Thanks !!! ( Just import jquery BEFORE angular)

[alilishan-omniphics]

Thanks !!! ( Just import jquery BEFORE angular) - I think should be mentioned in the Plugin Page

[leocaseiro]

Hi @alilishan-omniphics, it's on the docs, but seems nobody reads it, I might strip all content from the readme, so users will click at the docs link.

PS: That's an Angular thing. You must use jquery before angular anytime.

[alilishan-omniphics]

@leocaseiro haha thanks dude apologies for the error. could be i missed it cos i was linked to the discussion from https://github.com/mishguruorg/angular-timezone-selector

[njcoutinho]

@leocaseiro I'm loading jquery and angular before angular-chosen, still getting the error element.chosen is not a function.

Am I doing something wrong here?

[leocaseiro]

Hi @njcoutinho,
Thanks for using angular-chosen.

It seems you need to include also the chosen library.

Please, read the documentation how to get started:
http://leocaseiro.github.io/angular-chosen/#installation

PS: I appreciate if you open a separated issue for your case.

[njcoutinho]

@leocaseiro Just figured out I haven't loaded the chosen.jquery.min.js, My mistake

[ruisilva450]

Sorry to bring issue again but I can't seem to get it to work.
My order:
'bower_components/jquery/dist/jquery.js'
, 'bower_components/angular/angular.js'
, 'node_modules/chosen-js/chosen.jquery.js'
//, 'node_modules/chosen-npm/public/chosen.jquery.js'
, 'node_modules/angular-chosen-localytics/dist/angular-chosen.js'

And when I get to this point of angular-chosen.js:
chosenModule.directive('chosen', ['chosen', '$timeout', function(config, $timeout) {
if I do $('body').chosen it is defined and great, but when the directive runs, it is undefined

[VanTanev]

@ruisilva450 what module bundler do you use? Be mindful that it's possible to end up including multiple versions of jquery lib with webpack in some situations. If you're on yarn, check your yarn.lock, or use npm ls to check that you don't have multiple jQuery versions.

If you have multiple jQuery instances, then some of them might have a plugin applied and some not. It's a confusing and complicated problem to debug, and we might do something to address it in #247