Question

我正在尝试使用名为“selected”的jquery库进行下拉，并列出更好的列表。这是选择的jquery库：http://harvesthq.github.io/chosen/

如果我只是创建一个包含此内容的网络表单：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AssetTracker.Chosen.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">  
  <script language="Javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="../chosen.jquery.js" type="text/javascript"></script>
  <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
  <link href="/Content/Site.css" rel="stylesheet" />
  <link rel="stylesheet" href="/Chosen/chosen.css" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />
  <script type="text/javascript">
      $(document).ready(function() {
          $("#DropDownList1").chosen();
      });
  </script>
  <title>test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList CssClass="chosen-single" ID="DropDownList1" runat="server" data-placeholder="Choose one...">
            <asp:ListItem>USA</asp:ListItem>
            <asp:ListItem>Russia</asp:ListItem>
            <asp:ListItem>Poland</asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

工作正常，我可以打电话：

.chosen()

没有错误以及漂亮的下拉列表。现在的问题是我有一个asp.net Web表单，它使用这样的母版页：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AssetTracker.Chosen.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script language="Javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="../chosen.jquery.js" type="text/javascript"></script>
  <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
  <link href="/Content/Site.css" rel="stylesheet" />
  <link rel="stylesheet" href="/Chosen/chosen.css" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />
  <script type="text/javascript">
      $(document).ready(function () {
          $("#MainContent_DropDownList1").chosen();
      });
  </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <asp:DropDownList CssClass="chosen-single" ID="DropDownList1" runat="server" data-placeholder="Choose one...">
            <asp:ListItem>USA</asp:ListItem>
            <asp:ListItem>Russia</asp:ListItem>
            <asp:ListItem>Poland</asp:ListItem>
        </asp:DropDownList>

    </div>
</asp:Content>

相同的解决方案，相同的项目，但在控制台中具有母版页的项目给我一个错误：

Uncaught TypeError: Object [object Object] has no method 'chosen'

我知道一般来说这个错误是由于找不到脚本文件...但正如我所说，这是同一个位置，同样的解决方案，同样的项目...但对于我的生活，我不能让它发挥作用。

如果有人需要这里是母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="AssetTracker.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title>Asset Tracker</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <%--Site Scripts--%>

        </Scripts>
    </asp:ScriptManager>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
            </div>
            <div class="float-right">
                <section id="login">
                    <asp:LoginView runat="server" ViewStateMode="Disabled">

                        <LoggedInTemplate>
                            <p>
                                Hello, <a runat="server" class="username" href="#" title="">
                                    <asp:LoginName runat="server" CssClass="username" />
                                       </a>
                            </p>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </section>
                <nav>
                    <ul id="menu">
                        <li><a runat="server" href="~/">Home</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        <section class="content-wrapper main-content clear-fix">
            <asp:ContentPlaceHolder ID="MainMessageContent" runat="server"/>
            <asp:ContentPlaceHolder ID="ButtonContent" runat="server"/>
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; <%: DateTime.Now.Year %></p>
            </div>
        </div>
    </footer>
    </form>
</body>
</html>

这与jquery库之间的冲突有关，但我不了解Site.master站点母版页，足以理解为什么会发生这种情况。请有人让我知道我哪里出错了吗？

Answer 1

问题是您是否拥有“所选”javascript文件的相对路径？

如果在任何特定页面上显示的页面的URL没有相同的路径，则“选定”文件路径的../部分将不正确。

也许如果您为脚本使用完全指定的URL。

Answer 2

首先确保你已经加载了javascript然后... 问题是因为您正在使用母版页，它将更改页面上元素的客户端ID

所以你可以使用它，例如

<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" ClientIDMode="Static" runat="server">

Answer 3

使用母版页时我经历了很多次。首先，我认为您应该从Master Page中删除对Jquery库的任何引用。请记住，当您多次加载Jquery库时，它会停止工作。因此，如果您使用此<asp:ScriptReference Name="jquery" />，则内部再次调用Jquery库，因此请从MasterPage中删除它。目标是您只调用一次Jquery库以避免此常见错误Uncaught TypeError: Object [object Object] has no method 'xxxxx'。希望这有帮助。

Web表单在使用母版页时不调用jquery库，但在没有母版页的情况下工作

3 个答案: