Plug in does not load | 易学教程

问题

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

回答1:

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();
});

回答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>

回答3:

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

回答4:

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

回答5:

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 ~

来源：https://stackoverflow.com/questions/15024764/plug-in-does-not-load

标签

jquery

.net

jquery-plugins

javascript