jQuery Uncaught TypeError: $ (...). Tabs n'est pas une fonction

-1

ASP.NET 4.5 WebForms.

J'ai trouvé d'autres messages sur SO où les gens semblaient avoir ces mêmes problèmes, mais leurs réponses n'ont pas résolu mon problème. Ce qui est étrange parce que mes onglets sur une autre page fonctionnent toujours parfaitement. Au début, je pensais que le problème était dû à l'ajout d'une quantité décente de code-behind sur la page, mais en commentant tout dans mes méthodes Page_Load et Page_Init le problème persiste.

J'ai essayé d'ajouter $ (document) .ready appel à mon dossier js et sans résultat ... j'ai vu this après et a essayé de voir si mon problème lié, il ne . De l'erreur affichée dans l'inspecteur du navigateur, il apparaît que jQuery n'est pas chargé lorsque mon script est exécuté. J'ai donc essayé de le placer en bas de la page, sans modification. Puis j'ai essayé d'utiliser des bundles dans le Site.Master ... toujours rien. Je suis perplexe. La même configuration existe sur une autre page de ce site et charge très bien ce que j'ai cassé avec cette page?

$(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>

Mon Site.master contient les éléments suivants:

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

Le webopt: BundleReference contient:

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

EDIT: faisceaux jquery référence appelé 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"));

Source

2017-04-21 dbrad

Où est 'jquery-ui.js' (ou' jquery-ui.min.js', ou une version numérotée de l'un de ces formats) ajouté à la page? Je ne peux pas le voir référencé n'importe où dans votre exemple. Est-ce que 'Scripts.Render (" ~/bundles/jquery ")' l'inclut? Vous ne nous avez pas montré le code pour le bundle de script, seulement le CSS. De plus, la bibliothèque jQuery principale doit être incluse, ainsi que jquery-ui et l'interface utilisateur _before_ jQuery incluse. – ADyson

où est votre paquet jquery. fournir également un [mcve] –

Désolé mis à jour le poste avec la référence à l'ensemble. – dbrad

Je décidai que je chargeais trop d'éléments avec runat="server", cela peut avoir seulement est arrivé dans mon environnement de test, mais je ne souhaite pas que ma production rencontre des problèmes plus tard. J'ai déplacé le contenu de ct_tab à sa propre forme, et cela a résolu mon problème. Cela m'a conduit à une explication de l'erreur que j'ai reçue dans mon inspecteur de navigateur.

$(...).tabs(); n'a pas pu trouver l'élément car le serveur ne l'avait pas rendu à la page au moment de l'exécution de mon script.

Source

2017-04-21 16:20:01 dbrad

jQuery Uncaught TypeError: $ (...). Tabs n'est pas une fonction

Répondre

Questions connexes