Adding Chosen plugin to my website

Question

I am trying to add chosen jquery plugin from cdn at the below link. http://cdnjs.com/libraries/chosen/

I am working on a asp.net mvc application and added the scripts in layout page as below.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen-sprite.png"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/[email protected]"></script>



    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.proto.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.proto.min.js"></script>

My question is in top scripts Am I doing right code to reference sprite files ie chosen-sprite.png, [email protected]? If not please let me know how to reference sprite files in application.

Answer 1

A couple of things:

• You don't need to explicitly reference the images; those are referenced relative to the css file (so remove the first two lines)
• You only need one version of the plugin (jquery or prototype - so remove the prototype one)
• You only need to include either the minified or the non-minified version (ex:chosen.jquery.min.js or chosen.jquery.js, so remove whichever you want. Note: This applies to the css file as well)

Here's what it should look like:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">

<!-- JS -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

Remember:
From the documentation: Activate the plugin on the select boxes of your choice: $(".chosen-select").chosen()