Loading Chosen.jquery.js file in html file does not work

Question

I am trying to load chosen.jquery.js file in my html/css file to achieve searchable dropdown but it doesnt seem to work. I downloaded the chosen.js plugin from http://harvesthq.github.io/chosen/. After downloading the plugin I copied the chosen files(js and css) to the /includes folder for my tool.

This is what I have tried till now:

<script src="../includes/chosen.jquery.js"></script>
<script src="../includes/chosen.jquery.min.js"></script>
<script src="../includes/chosen.proto.js"></script>
<link rel="stylesheet" href="../includes/chosen.css" />
<link rel="stylesheet" href="../includes/chosen.min.css" />

<div class="searchform">

        <form class="pure-form" action="searchresults.php" method="post">
            <fieldset>
        <div class="searchfilters">
                <label>Search Filters: </label>
          <div class="search_boxes">                
         <select class="chosen-select" style="width:350px;" onchange="this.form.submit()">

                        <!--<option selected="selected">Search Project/Initiative...</option>-->
                        <?php
                                include "../includes/search_dropdown.php";
                                foreach($proj_ini_Array as $qa){
                                echo "<option value = \"$qa\">$qa</option>";
                                }
                        ?>

In the select box I have "chosen-select". At multiple places the class has been declared as only "chosen" or "chzn-select". Which one is the appropriate one? Also, I am not sure what are the .min files for?

What am I missing over here?

Thanks in advance.

You have repeted files in your html file. Load the min version of these files. Min files are compact version of the same files for fast load purposes . for instance . jquery.js ( full ) jquery.min file mimefied — Sandcar
– Sandcar, Commented Nov 21, 2013 at 23:05

steve · Accepted Answer · 2013-11-21 23:48:03Z

1

You have duplicated the CSS and min.css. Also the jquery and jquery.min versions.

Min stands for minified - compressed for speed of serving basically.

You also seem to be using both jQuery and Prototype versions of chosen. Are you using the Prototype JS library elsewhere? If not I'd remove it and just use (one version) of Chosen for JQuery. You also should ensure you're including jQuery itself... is that elsewhere in your code?

On that basis the includes you'd need:

<script src="../includes/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="../includes/chosen.min.css" />

Or if you don't already include jQuery - download it from:

http://code.jquery.com/jquery-1.10.2.min.js

and also store it to your includes folder. Add it above the Chosen files with:

<script src="../includes/jquery-1.10.2.min.js"></script>

Once you have those extra files stripped out it should be as simple as:

$('.chosen-select').chosen();

Inside an existing or new jQuery .ready() call [to run as soon as the DOM is ready]

And ensuring you have class="chosen-select" on each select field you wish to use Chosen on.

UPDATE:

Try adding this to initiate Chosen:

<script>
$(document).ready(function() {
   $('.chosen-select').chosen();
});
</script>

This can either go in the section of your HTML page, or just before the closing tag. Should work in either - just before the closing would be my choice.

edited Nov 21, 2013 at 23:48

answered Nov 21, 2013 at 23:08

steve

2,5191 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

xyzzz Over a year ago

Thank you for your answer. I did add the jquery file you mentioned. I just have one doubt now...where do I include the $(".chosen-select").chosen() in the above code ? I tried replacing it for the variable $qa...

steve Over a year ago

Hopefully we're close now. Before your <body> tag and inside the closing </head> tag try adding the extra code I've added to my answer above...

xyzzz Over a year ago

Cool. Got it Sir. I just added the above code which would activate the plugin above </div> tag. It is working now. Wouldnt it work without the jquery-1.10.2.js file ?

steve Over a year ago

Great - Chosen requires either Jquery or Prototype libraries, so it needed one of those two adding. (and the duplicate files removing). Glad it's working now. If I've helped it would be great if you could accept this answer :)

Collectives™ on Stack Overflow

Loading Chosen.jquery.js file in html file does not work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related