How to add the jquery chosen plugin dynamically?

Question

i'm using the jquery chosen plugin in the jquery datatables its not working in the second page of the datatable because while loading the page the elements are hidden so it how to add the chosen plugin dynamically

           $(".chosen").chosen({
                width: "300px",
                enable_search_threshold: 10
            });

<select class="chosen" data-placeholder="Assigned To" data-order="true" name="multiselect[]" id="multiselect" multiple="true">
//code here
</select>

Check this [question](http://stackoverflow.com/a/20148252/1671639) — Praveen, May 07 '15 at 06:11
Thanks!!! but i'm not having the problem of chosen update its working fine in the datatables 1st page — Raja Manickam, May 07 '15 at 06:15
Can you elaborate what's not working? Is it that your select dropdown are not applied with Chosen but are still the default browser selects? — zen.c, May 08 '15 at 02:21

score 1 · Accepted Answer · answered May 07 '15 at 06:17

You have two options:

You first show it, and after init you hide it again, so that you can shhow it when the user moves to the seconed page.
build a parent div around the select-tag and hide that one. This way chosen will be initalized also on the second page and you just need to show the parent div. You might face a problem with the width then. The workaround would be this: https://github.com/harvesthq/chosen/issues/795#issuecomment-66351829

score 0 · Answer 2 · answered May 08 '15 at 05:27

Declare the jquery plugin method's inside the "fnDrawCallback". So that the plugin's assigned while changing the page.

$('#regular_action_inline').DataTable({
                            "order": [],
                            "fnDrawCallback": function( oSettings ) {
                                $(".chosen").chosen({
                                    width: "300px",
                                    enable_search_threshold: 10
                                });                            }
            });

How to add the jquery chosen plugin dynamically?

2 Answers2