MVC 4 Adding Chosen Plugin to Html.DropdownListFor

Question

Need some help. I will be having dropdowns, some will have a large selection, in my app. So I have decided to give the chosen plugin a try. I need some help setting it up.

• Currently I have chosen.jquery.js and .css, chosen.jquery.min.js and .css in my scripts/content directory. Do I need others?

• I have them in my bundle config and have them in my view.

...

@Scripts.Render("~/bundles/jquery")    
@Scripts.Render("~/bundles/jqueryui")    
@Scripts.Render("~/bundles/jqueryval")    
@Scripts.Render("~/bundles/chosen")    
@Scripts.Render("~/bundles/gradients")    

View Drop down and doc ready

@Html.DropDownListFor(model => model.Title,
    @ViewBag.CourseList as SelectList, " -- Select Course -- ", new { @class = "chzn-select" })
@Html.ValidationMessageFor(model => model.Title)
...
...
<script type="text/javascript">
    $(document).ready(function () {
        $('.chzn-select').chosen();
    });
...
</script>

Currently getting Uncaught ReferenceError: $ is not defined on my $(document)

What else am I missing?

PS If you need more, just let me know.

Answer 1

Alright. So my after looking through the networks I found that my scripts weren't being created. And then I had some typos. Whoo. So much frustration over simple mistakes.

Thank you to @Hackerman for the bringing up the networks