Render issues when select tag isn't on document yet

[codebrew]

I'm using backbone.js and attempting to use chosen, but there is a bug with chosen where it attempts to do a search of the current doc to find its container. With backbone.js the flow is create a dom element in javascript, then add that element to the document. Inside that create dom element part you want to be able to do a this.$(".chosen-select").chosen() but this will fail.

I have a 1 line fix for this already.

chosen.jquery.js:

line 67 - this.container = $(container_div);

I can fork and issue a pull request if you want.

[Polemarchus]

Your proposed fix doesn't seem to work when there's more than one chosen object on the page. I think it's reusing the same container for each. However changing your line to this seemed to fix it for me:

this.container = this.form_field_jq.parent().find('#' + this.container_id);

[mlanza]

I'm also using Backbone and note similar issues. The problem is that Backbone generates an element (view) as a fragment that is attached to the DOM only when it's been fully built (and usually after you've already invoked the chosen jQuery method.

Internally, chosen assumes that its target elements are already part of the DOM. (It's calling jQuery without a context.) I believe the issue could be corrected if a jQuery context is maintained. That is, don't select elements via $(..). Instead, select them via $(.., context) or $(context).find(..) where context is the container of the select element being replaced. Essentially, just assume you have a document fragment.

For the time being I've overcome this issue by calling chosen only after the fragment is attached to the DOM. This does, however, make chosen a little unfriendly toward Backbone.js use.

[lobo-tuerto]

Yeah, I went the same route with backbonejs, calling chosen after the fragment is attached to the DOM.

I'd love to see this working without any extra considerations for the code using chosen.

[shenoudab]

Dears,

after trying the above solution :
this.container = this.form_field_jq.parent().find('#' + this.container_id);

i found that all of element width was 0px regarding this.f_width.

[bricestacey]

I have the same problem.

Chosen finds the container in the DOM using its id, but with backbone it wouldn't necessarily be in the DOM yet.

If you change it so that it uses the newly created element, it will render with a 0px width. You can work around this by specifying the width of your original select element.

At this point, all seems well, however, the close buttons for selected items (from the original select) will no longer work. To fix this, you can use setTimeout to trigger liszt:updated 1 or 2 seconds later -- hoping its been inserted into the DOM by then.

[masnick]

+1 for a fix on this!

[Filirom1]

the setTimeout solution is horrible but works. +1 for a fix

[lporras]

+1 for a fix

[atomical]

+1 for a fix

[MerlinDE]

+1 for a fix

[jaredjenkins]

Since a lot of jQuery plugins assume that you are trying to alter something already in the DOM, I'd recommend reading this blog post: http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/. It helped me get around this issue.

[orbiteleven]

I'm just starting to test this, but what about just setting this.container to container_div? It seems to work on my first few tests; has anyone tried this?

[elwayman02]

This isn't a backbone-specific problem, the issue is more widespread than that. This is a problem with writing ill-conceived jQuery selectors.

Either way, though, +1 for a fix.

[pfiller]

#1151 has been merged to master. I believe this issue is solved.