5

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

7
  • Check if chosen.jquery.js is accessible by the page ! 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. 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 .chosen is 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 .chosen being included before jQuery. Feb 22, 2013 at 13:13
  • @Jehanzeb.Malik Here is the code I have.. jsfiddle.net/Pmerj sorry lot of uneccesary code here but the plug in code is in the middle of it.
    – EP2012
    Feb 22, 2013 at 13:21
  • Are you using it on any framework or CMS? Feb 22, 2013 at 13:52

5 Answers 5

5

Reading the comments 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();
});
3
  • I see in firebug html, it looks like <script src="/Scripts/jquery-1.7.1.js"> is being called twice .. but in my code for that page, I can account for only one instance. I am not able to see where the second one is coming from.. lay out /master page or somewhere else?
    – EP2012
    Feb 22, 2013 at 14:12
  • @Ohark Are you loading script in head or body? Is any other script loading twice or only jquery? Please try the code I edited in my answer. Feb 22, 2013 at 14:25
  • Something is messed up in my trial page. I moved all to an existing application page and all is in order now. Thanks for your time. It appears that I have the order and misplacement issues earlier.
    – EP2012
    Feb 22, 2013 at 15:19
2

Your jquery and/or chosen plugin does not seem to load.

Try replacing them with:

<script src="//ajax.googleapis.com/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>

1

Don't use ~ in your html (aspx). You only use that in code-behind. Just use /scripts instead.

4
  • Removed that. But still getting the same error in firebug. TypeError: $(...).chosen is not a function
    – EP2012
    Feb 22, 2013 at 13:00
  • Check in the console that it's loading both scripts okay. Feb 22, 2013 at 13:01
  • Have you used firebug to profile Net, you should see both scripts load in. If they can't you'll see and error code
    – Hawxby
    Feb 22, 2013 at 13:02
  • In Firebug Net profile, I see this order.. getlocalhost, get site, get modernizr, get jquery 1.7, get chosen.jquery, get heroaccent.png, get jquery 1.7 - I see double loading of Jquery1.7 from the list.. can that be the issue.. not sure how that happened.
    – EP2012
    Feb 22, 2013 at 13:10
1

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

0

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 ~

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.