CODEWITHSUNDEEP
jqueryjquery-chosen
Raja Manickam
Raja Manickam

Reputation: 1903

How to add the jquery chosen plugin dynamically?

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>

Upvotes: 0

Views: 718

Answers (2)

Raja Manickam
Raja Manickam

Reputation: 1903

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
                                });                            }
            });

Upvotes: 0

Mainz007
Mainz007

Reputation: 543

You have two options:

  1. 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.

  2. 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

Upvotes: 1

Related Questions