jQuery Uncaught TypeError: $(...).tabs is not a function
jQuery Uncaught TypeError: $(...).tabs is not a function
ASP.NET 4.5 网络表单。
我在 SO 上发现了其他 post，人们似乎也有同样的问题，但他们的回答并没有解决我的问题。这是 st运行ge，因为我在另一个页面上的选项卡仍然可以正常工作。
起初我认为问题是由于在页面上添加了大量代码隐藏引起的，但是在我的 Page_Load 和 Page_Init 方法中注释掉所有内容问题仍然存在。
我试过将 $(document).ready 调用添加到我的 js 文件中，但无济于事...
我看到 this post 并试图查看我的问题是否相关，但事实并非如此。
从浏览器检查器中看到的错误来看，当我的脚本是 运行 时，似乎 jQuery 没有加载，所以我尝试将它放在页面底部，没有变化。然后我尝试在 Site.Master 中使用捆绑包......仍然没有。我很难过。此站点的另一个页面上存在完全相同的设置，并且加载正常我破坏了此页面的什么地方？
$(function () {
$("#tabs").tabs();
$("#tabs").addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
/*#region Direct Reporting*/
.dd {
overflow: auto;
white-space: nowrap;
}
div#dr_tab {
overflow:auto;
white-space: nowrap;
}
section#tables_container {
overflow: auto;
width: 2000px;
}
section#tables_container div {
display: inline;
overflow:auto;
}
section#tables_container table {
display: inline;
float: left;
margin-bottom: 50px;
border: 1px solid #252525;
margin-right: 8px;
margin-top:10px;
width: auto;
white-space:nowrap;
}
section#tables_container table th {
padding-bottom: 5px;
padding-top: 10px;
column-span: all;
}
/*#endregion*/
/*#region Contractor Time*/
div#ct_tab {
overflow: auto;
}
section#contractor_time {
overflow: auto;
width: 2000px;
}
section#contractor_time_table table td {
white-space: nowrap;
padding-right: 10px;
padding-bottom: 5px;
text-align: center;
}
/*#endregion*/
/*#region Manpower*/
section#manpower_dropdown {
text-align: center;
}
section#manpower_manage {
text-align: center;
}
section#manpower_manage label {
display: inline;
}
/*#endregion*/
/*#region Tabs*/
#tabs > div > h2 {
display: block;
text-align: center;
border-bottom: 2px solid #252525;
border-top: 2px solid #252525;
}
#tabs > ul > li > a {
padding-top: 20px;
padding-bottom: 20px;
border-left: 1px solid #252525;
}
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
float: left;
padding: .2em .1em .2em .1em;
width: 8em;
}
.ui-tabs-vertical .ui-tabs-nav > li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav > li > a {
display: block;
text-align: center;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 43em;
border-bottom: 2px solid #252525;
border-right: 2px solid #252525;
background-color: #F7F7F7;
}
.ui-tabs .ui-tabs-hide { display: none !important; }
.ui-tabs > ul {
list-style: none;
}
/*#endregion*/
.content_wrapper {
margin: 0 auto;
max-width: 1000px;
}
::-webkit-scrollbar {
height: 10px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #FFFF00;
}
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<link href="/Management/css/management.css" rel="stylesheet" type="text/css" />
<%--<script src="/Management/scripts/management.js"></script>--%>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<section id="tabs">
<ul>
<li><a href="#mp_tab">Manpower</a></li>
<li><a href="#ct_tab">Contractor Time</a></li>
<li><a href="#dr_tab">Direct Reports</a></li>
</ul>
<div id="mp_tab">
<h2>Manpower</h2>
<asp:UpdatePanel ID="ManpowerPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<section id="manpower_dropdown">
<asp:DropDownList runat="server" ID="ManpowerDropDown" OnSelectedIndexChanged="ManpowerDropDown_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="All" Value="0" />
<asp:ListItem Text="Contractors" Value="2" />
<asp:ListItem Text="Zebra" Value="1" />
<asp:ListItem Text="Terminated" Value="3" />
</asp:DropDownList>
<asp:DropDownList runat="server" ID="ManpowerChooseUserDropdown" OnSelectedIndexChanged="ManpowerChooseUserDropdown_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:Button ID="ManpowerManageButton" Text="Manage" runat="server" OnClick="ManpowerManageButton_Click"/>
</section>
<section id="manpower_manage">
<asp:UpdatePanel ID="ManpowerManagePanel" runat="server" UpdateMode="Conditional" Visible="false">
<ContentTemplate>
<asp:CheckBox Text="New Hire" runat="server" ID="ManpowerManageNewHireCheckbox" AutoPostBack="true" ToolTip="Employee is new hire" OnCheckedChanged="ManpowerManageNewHireCheckbox_CheckedChanged" />
<asp:CheckBox Text="Contractor" runat ="server" ID="ManpowerManageIsConCheckbox" AutoPostBack="false" ToolTip="Employee Contractor status" />
<asp:CheckBox Text="D/I" runat="server" ID="ManpowerManageDirectCheckbox" ToolTip="If checked employee is Direct" />
<asp:CheckBox Text="Active" runat="server" ID="ManpowerManageActiveCheckbox" ToolTip="If checked employee is Active" />
<br />
<asp:TextBox runat="server" ID="ManpowerManageCoreIdTextbox" AutoPostBack="false" ToolTip="Core ID" placeholder="Core ID.." ValidationGroup="ManpowerManage"/>
<asp:TextBox runat="server" ID="ManpowerManageFNameTextbox" AutoPostBack="false" ToolTip="Employee First Name" placeholder="First Name.." ValidationGroup="ManpowerManage"/>
<asp:TextBox runat="server" ID="ManpowerManageLNameTextbox" AutoPostBack="false" ToolTip="Employee Last Name" placeholder="Last Name.." ValidationGroup="ManpowerManage"/>
<asp:TextBox runat="server" ID="ManpowerManageBadgeTextbox" AutoPostBack="false" ToolTip="Employee Badge" placeholder="Badge #.." />
<br />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageCStartDateTextbox" AutoPostBack="false" ToolTip="Employee Contractor start date" />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageZStartDateTextbox" AutoPostBack="false" ToolTip="Employee Zebra start date" />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageTermDateTextbox" AutoPostBack="false" ToolTip="Employee Termination date" />
<br />
<asp:TextBox runat="server" ID="ManpowerManageTermReasonTextbox" AutoPostBack="false" ToolTip="Employee Termination Reason" Width="89%" placeholder="Termination Reason" />
<br />
<asp:DropDownList runat="server" ID="ManpowerManageSupDropdown" AutoPostBack="false" ToolTip="Supervisor of Employee" ValidationGroup="ManpowerManage"/>
<asp:DropDownList runat="server" ID="ManpowerManageShiftDropdown" AutoPostBack="false" ToolTip="Employee Shift" ValidationGroup="ManpowerManage">
<asp:ListItem Text="--Shift--" />
<asp:ListItem Text="Day" Value="0" />
<asp:ListItem Text="Night" Value="1" />
</asp:DropDownList>
<asp:DropDownList runat="server" ID="ManpowerManageTeamDropdown" AutoPostBack="false" ToolTip="Employee Team" ValidationGroup="ManpowerManage"/>
<br />
<asp:Button ID="ManpowerManageCancelButton" Text="Cancel" runat="server" OnClick="ManpowerManageCancelButton_Click"/>
<asp:Button ID="ManpowerManageSubmitButton" Text="Submit" runat="server" OnClick="ManpowerManageSubmitButton_Click" ValidationGroup="ManpowerManage"/>
<br />
<asp:RequiredFieldValidator ID="CoreIdCandidate" runat="server" ControlToValidate="ManpowerManageCoreIdTextbox" ErrorMessage="Core ID Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>
<asp:RequiredFieldValidator ID="FirstNameCandidate" runat="server" ControlToValidate="ManpowerManageFNameTextbox" ErrorMessage="First Name Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" />
<asp:RequiredFieldValidator ID="LastNameCandidate" runat="server" ControlToValidate="ManpowerManageLNameTextbox" ErrorMessage="Last Name Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" />
<asp:RequiredFieldValidator ID="SupervisorCandidate" runat="server" ControlToValidate="ManpowerManageSupDropdown" ErrorMessage="Supervisor Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" />
<asp:RequiredFieldValidator ID="ShiftCandidate" runat="server" ControlToValidate="ManpowerManageShiftDropdown" ErrorMessage="Shift Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>
<asp:RequiredFieldValidator ID="TeamCandidate" runat="server" ControlToValidate="ManpowerManageTeamDropdown" ErrorMessage="Team Required" InitialValue="" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>
</ContentTemplate>
</asp:UpdatePanel>
</section>
<section id="manpower_table">
<asp:Table runat="server" ID="ManpowerTable" Width="100%">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Name</asp:TableHeaderCell>
<asp:TableHeaderCell>Core ID</asp:TableHeaderCell>
<asp:TableHeaderCell>Badge</asp:TableHeaderCell>
<asp:TableHeaderCell>Team</asp:TableHeaderCell>
<asp:TableHeaderCell>Supervisor</asp:TableHeaderCell>
<asp:TableHeaderCell>Shift</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</section>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="ct_tab">
<h2>Contractor Time Management</h2>
<asp:UpdatePanel runat="server" ID="ContractorTimePanel" UpdateMode="Conditional" Visible="true" Width="1000px">
<ContentTemplate>
<section id="contractor_dropdown_container">
<asp:DropDownList runat="server" ID="ContractorTimeDropdown" AutoPostBack="true" OnSelectedIndexChanged="ContractorTimeDropdown_SelectedIndexChanged" ToolTip="Select contractor name to view punches.">
</asp:DropDownList>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorTimeRangeStart" AutoPostBack="false" ToolTip="Punch range start date." Width="175px" />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorTimeRangeStop" AutoPostBack="false" ToolTip="Punch range stop date." Width="175px"/>
<asp:Button runat="server" ID="SelectContractorForUpdateButton" Text="Edit Punches" ToolTip="Selects Contractor in dropdown to view punches and update if required. Optionally add start and end date ranges to narrow results." OnClick="SelectContractorForUpdateButton_Click" />
<asp:Button ID="SelectContractorForTimeReportButton" Text="Time Report" runat="server" ToolTip="Selects Contractor in dropdown to view their time totals for a specified date range." OnClick="SelectContractorForTimeReportButton_Click" ValidationGroup="TimeReport"/>
<br />
<asp:RequiredFieldValidator ID="ContractorCandidate" ErrorMessage="Choose Contractor to view their report!" InitialValue="" ControlToValidate="ContractorTimeDropdown" runat="server" SetFocusOnError="true" Display="Dynamic" ValidationGroup="TimeReport" Enabled="true" />
</section>
<asp:UpdatePanel runat="server" ID="ContractorTimeEditPanel" UpdateMode="Conditional" Visible="false">
<ContentTemplate>
<asp:DropDownList runat="server" ID="PunchIdDropdown" AutoPostBack="true" OnSelectedIndexChanged="PunchIdDropdown_SelectedIndexChanged" TootlTip="Select ID of punch to update.">
</asp:DropDownList>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchInTextbox" Width="175px" ToolTip="Punch IN date/time."/>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchOutTextbox" Width="175px" ToolTip="Punch Out date/time."/>
<asp:Label runat="server" ID="UpdatedByLabel"></asp:Label>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchUpdatedDateTextbox" Width="175px" ToolTip="Select date/time punch was updated."/>
<asp:Button runat="server" ID="CancelUpdatePunchButton" Text="Cancel" OnClick="CancelUpdatePunchButton_Click"/>
<asp:Button runat="server" ID="UpdatePunchButton" Text="Submit" ToolTip="Submits updated punch data." OnClick="UpdatePunchButton_Click"/>
<asp:TextBox runat="server" ID="ContractorPunchUpdatedReasonTextbox" Width="100%" ToolTip="Reason punch was updated."/>
</ContentTemplate>
</asp:UpdatePanel>
<section id="contractor_time_table">
<asp:Table runat="server" ID="ContractorTimeTable" Width="100%" Visible="true">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Punch ID</asp:TableHeaderCell>
<asp:TableHeaderCell>Punch IN</asp:TableHeaderCell>
<asp:TableHeaderCell>Punch OUT</asp:TableHeaderCell>
<asp:TableHeaderCell>Updated BY</asp:TableHeaderCell>
<asp:TableHeaderCell>Update DATE</asp:TableHeaderCell>
<asp:TableHeaderCell>Update NOTES</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
<asp:Table runat="server" ID="ContractorTimeReportTable" Width="100%" Visible="false">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Day</asp:TableHeaderCell>
<asp:TableHeaderCell>Punches</asp:TableHeaderCell>
<asp:TableHeaderCell>Total Time</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</section>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="dr_tab">
<h2>Direct Reports</h2>
<section id="tables_container">
<asp:UpdatePanel runat="server" ID="DirectReportsPanel" UpdateMode="Conditional" CssClass="dd" Width="200px">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</section>
</div>
</section>
</asp:Content>
我的 Site.Master 包含以下内容：
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - BSP</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<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>
webopt:BundleReference 包含：
<bundles version="1.0">
<styleBundle path="~/Content/css">
<include path="~/Content/Site.css" />
</styleBundle>
<styleBundle path="~/Content/themes/base/css">
<include path="~/Content/themes/base/jquery.ui.core.css" />
<include path="~/Content/themes/base/jquery.ui.resizable.css" />
<include path="~/Content/themes/base/jquery.ui.selectable.css" />
<include path="~/Content/themes/base/jquery.ui.accordion.css" />
<include path="~/Content/themes/base/jquery.ui.autocomplete.css" />
<include path="~/Content/themes/base/jquery.ui.button.css" />
<include path="~/Content/themes/base/jquery.ui.dialog.css" />
<include path="~/Content/themes/base/jquery.ui.slider.css" />
<include path="~/Content/themes/base/jquery.ui.tabs.css" />
<include path="~/Content/themes/base/jquery.ui.datepicker.css" />
<include path="~/Content/themes/base/jquery.ui.progressbar.css" />
<include path="~/Content/themes/base/jquery.ui.theme.css" />
</styleBundle>
</bundles>
编辑：jquery 在 Site.Master 中调用的捆绑参考：
// Add base/ui jQuery script library
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.js",
"~/Scripts/jquery-ui-1.8.24.js"));
我确定我使用 runat="server" 加载了太多元素，这可能只发生在我的测试环境中，但我不希望我的生产 运行 以后出现问题。我将 ct_tab 内容移动到它自己的形式，这解决了我的问题。这让我对我在浏览器检查器中收到的错误进行了解释。
$(...).tabs(); 无法找到该元素，因为在我的脚本 运行.
时服务器尚未将它呈现到页面
ASP.NET 4.5 网络表单。
我在 SO 上发现了其他 post，人们似乎也有同样的问题，但他们的回答并没有解决我的问题。这是 st运行ge，因为我在另一个页面上的选项卡仍然可以正常工作。
起初我认为问题是由于在页面上添加了大量代码隐藏引起的，但是在我的 Page_Load 和 Page_Init 方法中注释掉所有内容问题仍然存在。
我试过将 $(document).ready 调用添加到我的 js 文件中，但无济于事... 我看到 this post 并试图查看我的问题是否相关，但事实并非如此。 从浏览器检查器中看到的错误来看，当我的脚本是 运行 时，似乎 jQuery 没有加载，所以我尝试将它放在页面底部，没有变化。然后我尝试在 Site.Master 中使用捆绑包......仍然没有。我很难过。此站点的另一个页面上存在完全相同的设置，并且加载正常我破坏了此页面的什么地方？
$(function () {
$("#tabs").tabs();
$("#tabs").addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
/*#region Direct Reporting*/
.dd {
overflow: auto;
white-space: nowrap;
}
div#dr_tab {
overflow:auto;
white-space: nowrap;
}
section#tables_container {
overflow: auto;
width: 2000px;
}
section#tables_container div {
display: inline;
overflow:auto;
}
section#tables_container table {
display: inline;
float: left;
margin-bottom: 50px;
border: 1px solid #252525;
margin-right: 8px;
margin-top:10px;
width: auto;
white-space:nowrap;
}
section#tables_container table th {
padding-bottom: 5px;
padding-top: 10px;
column-span: all;
}
/*#endregion*/
/*#region Contractor Time*/
div#ct_tab {
overflow: auto;
}
section#contractor_time {
overflow: auto;
width: 2000px;
}
section#contractor_time_table table td {
white-space: nowrap;
padding-right: 10px;
padding-bottom: 5px;
text-align: center;
}
/*#endregion*/
/*#region Manpower*/
section#manpower_dropdown {
text-align: center;
}
section#manpower_manage {
text-align: center;
}
section#manpower_manage label {
display: inline;
}
/*#endregion*/
/*#region Tabs*/
#tabs > div > h2 {
display: block;
text-align: center;
border-bottom: 2px solid #252525;
border-top: 2px solid #252525;
}
#tabs > ul > li > a {
padding-top: 20px;
padding-bottom: 20px;
border-left: 1px solid #252525;
}
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
float: left;
padding: .2em .1em .2em .1em;
width: 8em;
}
.ui-tabs-vertical .ui-tabs-nav > li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav > li > a {
display: block;
text-align: center;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 43em;
border-bottom: 2px solid #252525;
border-right: 2px solid #252525;
background-color: #F7F7F7;
}
.ui-tabs .ui-tabs-hide { display: none !important; }
.ui-tabs > ul {
list-style: none;
}
/*#endregion*/
.content_wrapper {
margin: 0 auto;
max-width: 1000px;
}
::-webkit-scrollbar {
height: 10px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #FFFF00;
}
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<link href="/Management/css/management.css" rel="stylesheet" type="text/css" />
<%--<script src="/Management/scripts/management.js"></script>--%>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<section id="tabs">
<ul>
<li><a href="#mp_tab">Manpower</a></li>
<li><a href="#ct_tab">Contractor Time</a></li>
<li><a href="#dr_tab">Direct Reports</a></li>
</ul>
<div id="mp_tab">
<h2>Manpower</h2>
<asp:UpdatePanel ID="ManpowerPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<section id="manpower_dropdown">
<asp:DropDownList runat="server" ID="ManpowerDropDown" OnSelectedIndexChanged="ManpowerDropDown_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="All" Value="0" />
<asp:ListItem Text="Contractors" Value="2" />
<asp:ListItem Text="Zebra" Value="1" />
<asp:ListItem Text="Terminated" Value="3" />
</asp:DropDownList>
<asp:DropDownList runat="server" ID="ManpowerChooseUserDropdown" OnSelectedIndexChanged="ManpowerChooseUserDropdown_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:Button ID="ManpowerManageButton" Text="Manage" runat="server" OnClick="ManpowerManageButton_Click"/>
</section>
<section id="manpower_manage">
<asp:UpdatePanel ID="ManpowerManagePanel" runat="server" UpdateMode="Conditional" Visible="false">
<ContentTemplate>
<asp:CheckBox Text="New Hire" runat="server" ID="ManpowerManageNewHireCheckbox" AutoPostBack="true" ToolTip="Employee is new hire" OnCheckedChanged="ManpowerManageNewHireCheckbox_CheckedChanged" />
<asp:CheckBox Text="Contractor" runat ="server" ID="ManpowerManageIsConCheckbox" AutoPostBack="false" ToolTip="Employee Contractor status" />
<asp:CheckBox Text="D/I" runat="server" ID="ManpowerManageDirectCheckbox" ToolTip="If checked employee is Direct" />
<asp:CheckBox Text="Active" runat="server" ID="ManpowerManageActiveCheckbox" ToolTip="If checked employee is Active" />
<br />
<asp:TextBox runat="server" ID="ManpowerManageCoreIdTextbox" AutoPostBack="false" ToolTip="Core ID" placeholder="Core ID.." ValidationGroup="ManpowerManage"/>
<asp:TextBox runat="server" ID="ManpowerManageFNameTextbox" AutoPostBack="false" ToolTip="Employee First Name" placeholder="First Name.." ValidationGroup="ManpowerManage"/>
<asp:TextBox runat="server" ID="ManpowerManageLNameTextbox" AutoPostBack="false" ToolTip="Employee Last Name" placeholder="Last Name.." ValidationGroup="ManpowerManage"/>
<asp:TextBox runat="server" ID="ManpowerManageBadgeTextbox" AutoPostBack="false" ToolTip="Employee Badge" placeholder="Badge #.." />
<br />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageCStartDateTextbox" AutoPostBack="false" ToolTip="Employee Contractor start date" />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageZStartDateTextbox" AutoPostBack="false" ToolTip="Employee Zebra start date" />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ManpowerManageTermDateTextbox" AutoPostBack="false" ToolTip="Employee Termination date" />
<br />
<asp:TextBox runat="server" ID="ManpowerManageTermReasonTextbox" AutoPostBack="false" ToolTip="Employee Termination Reason" Width="89%" placeholder="Termination Reason" />
<br />
<asp:DropDownList runat="server" ID="ManpowerManageSupDropdown" AutoPostBack="false" ToolTip="Supervisor of Employee" ValidationGroup="ManpowerManage"/>
<asp:DropDownList runat="server" ID="ManpowerManageShiftDropdown" AutoPostBack="false" ToolTip="Employee Shift" ValidationGroup="ManpowerManage">
<asp:ListItem Text="--Shift--" />
<asp:ListItem Text="Day" Value="0" />
<asp:ListItem Text="Night" Value="1" />
</asp:DropDownList>
<asp:DropDownList runat="server" ID="ManpowerManageTeamDropdown" AutoPostBack="false" ToolTip="Employee Team" ValidationGroup="ManpowerManage"/>
<br />
<asp:Button ID="ManpowerManageCancelButton" Text="Cancel" runat="server" OnClick="ManpowerManageCancelButton_Click"/>
<asp:Button ID="ManpowerManageSubmitButton" Text="Submit" runat="server" OnClick="ManpowerManageSubmitButton_Click" ValidationGroup="ManpowerManage"/>
<br />
<asp:RequiredFieldValidator ID="CoreIdCandidate" runat="server" ControlToValidate="ManpowerManageCoreIdTextbox" ErrorMessage="Core ID Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>
<asp:RequiredFieldValidator ID="FirstNameCandidate" runat="server" ControlToValidate="ManpowerManageFNameTextbox" ErrorMessage="First Name Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" />
<asp:RequiredFieldValidator ID="LastNameCandidate" runat="server" ControlToValidate="ManpowerManageLNameTextbox" ErrorMessage="Last Name Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" />
<asp:RequiredFieldValidator ID="SupervisorCandidate" runat="server" ControlToValidate="ManpowerManageSupDropdown" ErrorMessage="Supervisor Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true" />
<asp:RequiredFieldValidator ID="ShiftCandidate" runat="server" ControlToValidate="ManpowerManageShiftDropdown" ErrorMessage="Shift Required" InitialValue="" SetFocusOnError="true" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>
<asp:RequiredFieldValidator ID="TeamCandidate" runat="server" ControlToValidate="ManpowerManageTeamDropdown" ErrorMessage="Team Required" InitialValue="" ValidationGroup="ManpowerManage" Display="Dynamic" Enabled="true"/>
</ContentTemplate>
</asp:UpdatePanel>
</section>
<section id="manpower_table">
<asp:Table runat="server" ID="ManpowerTable" Width="100%">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Name</asp:TableHeaderCell>
<asp:TableHeaderCell>Core ID</asp:TableHeaderCell>
<asp:TableHeaderCell>Badge</asp:TableHeaderCell>
<asp:TableHeaderCell>Team</asp:TableHeaderCell>
<asp:TableHeaderCell>Supervisor</asp:TableHeaderCell>
<asp:TableHeaderCell>Shift</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</section>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="ct_tab">
<h2>Contractor Time Management</h2>
<asp:UpdatePanel runat="server" ID="ContractorTimePanel" UpdateMode="Conditional" Visible="true" Width="1000px">
<ContentTemplate>
<section id="contractor_dropdown_container">
<asp:DropDownList runat="server" ID="ContractorTimeDropdown" AutoPostBack="true" OnSelectedIndexChanged="ContractorTimeDropdown_SelectedIndexChanged" ToolTip="Select contractor name to view punches.">
</asp:DropDownList>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorTimeRangeStart" AutoPostBack="false" ToolTip="Punch range start date." Width="175px" />
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorTimeRangeStop" AutoPostBack="false" ToolTip="Punch range stop date." Width="175px"/>
<asp:Button runat="server" ID="SelectContractorForUpdateButton" Text="Edit Punches" ToolTip="Selects Contractor in dropdown to view punches and update if required. Optionally add start and end date ranges to narrow results." OnClick="SelectContractorForUpdateButton_Click" />
<asp:Button ID="SelectContractorForTimeReportButton" Text="Time Report" runat="server" ToolTip="Selects Contractor in dropdown to view their time totals for a specified date range." OnClick="SelectContractorForTimeReportButton_Click" ValidationGroup="TimeReport"/>
<br />
<asp:RequiredFieldValidator ID="ContractorCandidate" ErrorMessage="Choose Contractor to view their report!" InitialValue="" ControlToValidate="ContractorTimeDropdown" runat="server" SetFocusOnError="true" Display="Dynamic" ValidationGroup="TimeReport" Enabled="true" />
</section>
<asp:UpdatePanel runat="server" ID="ContractorTimeEditPanel" UpdateMode="Conditional" Visible="false">
<ContentTemplate>
<asp:DropDownList runat="server" ID="PunchIdDropdown" AutoPostBack="true" OnSelectedIndexChanged="PunchIdDropdown_SelectedIndexChanged" TootlTip="Select ID of punch to update.">
</asp:DropDownList>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchInTextbox" Width="175px" ToolTip="Punch IN date/time."/>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchOutTextbox" Width="175px" ToolTip="Punch Out date/time."/>
<asp:Label runat="server" ID="UpdatedByLabel"></asp:Label>
<asp:TextBox runat="server" TextMode="DateTimeLocal" ID="ContractorPunchUpdatedDateTextbox" Width="175px" ToolTip="Select date/time punch was updated."/>
<asp:Button runat="server" ID="CancelUpdatePunchButton" Text="Cancel" OnClick="CancelUpdatePunchButton_Click"/>
<asp:Button runat="server" ID="UpdatePunchButton" Text="Submit" ToolTip="Submits updated punch data." OnClick="UpdatePunchButton_Click"/>
<asp:TextBox runat="server" ID="ContractorPunchUpdatedReasonTextbox" Width="100%" ToolTip="Reason punch was updated."/>
</ContentTemplate>
</asp:UpdatePanel>
<section id="contractor_time_table">
<asp:Table runat="server" ID="ContractorTimeTable" Width="100%" Visible="true">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Punch ID</asp:TableHeaderCell>
<asp:TableHeaderCell>Punch IN</asp:TableHeaderCell>
<asp:TableHeaderCell>Punch OUT</asp:TableHeaderCell>
<asp:TableHeaderCell>Updated BY</asp:TableHeaderCell>
<asp:TableHeaderCell>Update DATE</asp:TableHeaderCell>
<asp:TableHeaderCell>Update NOTES</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
<asp:Table runat="server" ID="ContractorTimeReportTable" Width="100%" Visible="false">
<asp:TableHeaderRow>
<asp:TableHeaderCell>Day</asp:TableHeaderCell>
<asp:TableHeaderCell>Punches</asp:TableHeaderCell>
<asp:TableHeaderCell>Total Time</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
</section>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="dr_tab">
<h2>Direct Reports</h2>
<section id="tables_container">
<asp:UpdatePanel runat="server" ID="DirectReportsPanel" UpdateMode="Conditional" CssClass="dd" Width="200px">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</section>
</div>
</section>
</asp:Content>
我的 Site.Master 包含以下内容：
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - BSP</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<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>
webopt:BundleReference 包含：
<bundles version="1.0">
<styleBundle path="~/Content/css">
<include path="~/Content/Site.css" />
</styleBundle>
<styleBundle path="~/Content/themes/base/css">
<include path="~/Content/themes/base/jquery.ui.core.css" />
<include path="~/Content/themes/base/jquery.ui.resizable.css" />
<include path="~/Content/themes/base/jquery.ui.selectable.css" />
<include path="~/Content/themes/base/jquery.ui.accordion.css" />
<include path="~/Content/themes/base/jquery.ui.autocomplete.css" />
<include path="~/Content/themes/base/jquery.ui.button.css" />
<include path="~/Content/themes/base/jquery.ui.dialog.css" />
<include path="~/Content/themes/base/jquery.ui.slider.css" />
<include path="~/Content/themes/base/jquery.ui.tabs.css" />
<include path="~/Content/themes/base/jquery.ui.datepicker.css" />
<include path="~/Content/themes/base/jquery.ui.progressbar.css" />
<include path="~/Content/themes/base/jquery.ui.theme.css" />
</styleBundle>
</bundles>
编辑：jquery 在 Site.Master 中调用的捆绑参考：
// Add base/ui jQuery script library
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.js",
"~/Scripts/jquery-ui-1.8.24.js"));
我确定我使用 runat="server" 加载了太多元素，这可能只发生在我的测试环境中，但我不希望我的生产 运行 以后出现问题。我将 ct_tab 内容移动到它自己的形式，这解决了我的问题。这让我对我在浏览器检查器中收到的错误进行了解释。
$(...).tabs(); 无法找到该元素，因为在我的脚本 运行.