Why does not my plug in load? The jquery and plug in links are referenced. The plug in is called .. .. Please help me find what I am missing in the code.
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/chosen.jquery.js"></script>
<select class="chzn-select" tabindex="1" style="width:350px;" data-
placeholder="Choose a Country">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
<script>
$(document).ready(function(){
$(".chzn-select").chosen();
});
</script>
I am getting the firebug error:
TypeError: $(...).chosen is not a function
Why does not my plug in load? The jquery and plug in links are referenced. The plug in is called .. .. Please help me find what I am missing in the code.
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/chosen.jquery.js"></script>
<select class="chzn-select" tabindex="1" style="width:350px;" data-
placeholder="Choose a Country">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
<script>
$(document).ready(function(){
$(".chzn-select").chosen();
});
</script>
I am getting the firebug error:
Share Improve this question edited Feb 22, 2013 at 13:01 EP2012 asked Feb 22, 2013 at 12:55 EP2012EP2012 3411 gold badge7 silver badges13 bronze badges 7TypeError: $(...).chosen is not a function
- Check if chosen.jquery.js is accessible by the page ! – Mandeep Pasbola Commented Feb 22, 2013 at 13:02
- Is there a live url where we can test it? The issue is obviously related to incorrect directory path. – Jehanzeb.Malik Commented Feb 22, 2013 at 13:08
-
1
Guys if you would for once look at the code snippet that the OP posted you would see that
.chosenis being called inside$(document).ready();. So that means that the function will only run after jQuery is included. So it is not the problem with~or.chosenbeing included before jQuery. – Jehanzeb.Malik Commented Feb 22, 2013 at 13:13 - @Jehanzeb.Malik Here is the code I have.. jsfiddle/Pmerj sorry lot of uneccesary code here but the plug in code is in the middle of it. – EP2012 Commented Feb 22, 2013 at 13:21
- Are you using it on any framework or CMS? – Jehanzeb.Malik Commented Feb 22, 2013 at 13:52
5 Answers
Reset to default 5Reading the ments and searching for the related issue I found out that the reason is that because the jQuery was being included twice. Look at this.
I created this fiddle where I am including chosen from this cdn service.
If jquery is included only once than
$(".chzn-select").chosen();
should work fine.
EDIT:
Instead of using
$(document).ready(function(){
$(".chzn-select").chosen();
});
try
$(document).bind("pageinit", function() {
$(".chzn-select").chosen();
});
Your jquery and/or chosen plugin does not seem to load.
Try replacing them with:
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/chosen.jquery.js" type="text/javascript"></script>
Also make sure chosen.jquery.js is really included, by opening the url from your source. Or checking your network tab in firebug or any other developer console. If it shows a 404, your script isn't at the right location.
Also make sure your page layout is like this
<html>
<head>
<!-- your css files -->
<link/>
</head>
<body>
<!-- Your html above javascript includes-->
<select>
....
</select>
<!-- Inlcude your js files at the bottom -->
<script src="bla.js" />
<script>
//your inline javascript goes below includes
</script>
</body>
Don't use ~ in your html (aspx). You only use that in code-behind. Just use /scripts instead.
I think Archer pointed out the right problem, but I have another suggestion for the solution: use RegisterClientScriptInclude (example)
public void Page_Load()
{
var pageType = this.GetType();
ClientScriptManager cs = Page.ClientScript;
if (!cs.IsClientScriptIncludeRegistered(pageType, "jQuery"))
cs.RegisterClientScriptInclude(pageType, "jQuery", ResolveClientUrl("~/Scripts/jquery-1.7.1.js"));
if (!cs.IsClientScriptIncludeRegistered(pageType, "jQuery.chosen"))
cs.RegisterClientScriptInclude(pageType, "jQuery.chosen", ResolveClientUrl("~/Scripts/chosen.jquery.js"));
}
This will place script tags in your page header element, which means you can remove your reference on the page itself. It mainly serves the purpose to avoid problems when hosting under an unknown virtual directory location (which in a development environment is often a directory under your dev web server).
It is because your chosen.jquery.js is loading before JQuery try to check your path and if you're using simple drag and drop the Js files from your folder to your page then you dont have to worry about the ~