jQuery Error: $ is not defined Sys is not defined in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

below errors I am getting on browser console

  1. Failed to load resource: the server responded with a status of 404 (Not Found)WebForm1.aspx:11
  2. Uncaught ReferenceError: $ is not defined at WebForm1.aspx:11 WebForm1.aspx:49
  3. Uncaught ReferenceError: Sys is not defined at WebForm1.aspx:49

Below is my code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        function alertbox(n) {
            alert(n);
        }
    </script>
    <script src="../../assets/js/jquery.min.js"></script>
    <script type="text/javascript"> 
        function jScript() {
            //Enable Disable TextBoxes in a Row when the Row CheckBox is checked.
            $("[id*=chkRow]").bind("click", function () {
                //Find and reference the GridView.
                var grid = $(this).closest("table");

                //Find and reference the Header CheckBox.
                var chkHeader = $("[id*=chkHeader]", grid);

                //If the CheckBox is Checked then enable the TextBoxes in thr Row.
                if (!$(this).is(":checked")) {
                    var td = $("td", $(this).closest("tr"));
                    //td.css({ "background-color": "#FFF" });
                    $("input[type=text]", td).attr("disabled", "disabled");
                } else {
                    var td = $("td", $(this).closest("tr"));
                    //td.css({ "background-color": "#D8EBF2" });
                    $("input[type=text]", td).removeAttr("disabled");
                }

                //Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
                if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
                    chkHeader.attr("checked", "checked");
                } else {
                    chkHeader.removeAttr("checked");
                }
            });
        }
        $(function () {
            
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderLogStatus" runat="server">
    

    <div class="header-top bg-img">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-5 col-12 col-sm-4">
                    <div class="login-register">
                        <ul>
                            <li>
                                <asp:Label ID="lbluser" runat="server" ForeColor="White" Font-Bold="true"></asp:Label>
                            </li>
                            <li><a href="../logout.aspx"><i class="fa fa-sign-out"></i>&nbsp;Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="bodyplaceholder" runat="server">
    <div class="breadcrumb-area">
        <div class="breadcrumb-bottom">
            <div class="container">
                <ul>
                    <li><a>Staff Strength Entry</a>
                        <span>Udise Code:
                            <asp:Label ID="lblUdiceCode" runat="server"></asp:Label>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="login-register-area pt-40 pb-40">

        <div class="container">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <script type="text/javascript" language="javascript">
                          Sys.Application.add_load(jScript);
                    </script>
                    <!-- For Enabling & Disabling Texbox -->
                     
                    <asp:Panel ID="Panel1" runat="server">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <label class="bold">Select Post Type: <span class="red">*</span></label>
                                                <asp:DropDownList ID="ddlposttype" runat="server" CssClass="form-control" Enabled="False" AutoPostBack="true" OnSelectedIndexChanged="ddlposttype_SelectedIndexChanged" ValidationGroup="up">
                                                </asp:DropDownList>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator15" runat="server" ErrorMessage="*Required" SetFocusOnError="true" Display="Dynamic" ControlToValidate="ddlposttype" InitialValue="0" ValidationGroup="up" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RequiredFieldValidator>
                                            </div>
                                            <div class="col-lg-3">
                                                <label class="bold">Sanctioned: <span class="red">*</span></label>
                                                <asp:TextBox ID="textboxsanctioned" CssClass="form-control" runat="server" Enabled="False" MaxLength="3" ng-model="sanctioned" ValidationGroup="up"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*Required" SetFocusOnError="true" Display="Dynamic" ControlToValidate="textboxsanctioned" ValidationGroup="up" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server" ErrorMessage="Only digits allowed" ValidationExpression="^[0-9]*$" SetFocusOnError="true" Display="Dynamic" ControlToValidate="textboxsanctioned" ValidationGroup="up" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RegularExpressionValidator>
                                            </div>
                                            <div class="col-lg-3">
                                                <label class="bold">Filled: <span class="red">*</span></label>
                                                <asp:TextBox ID="textboxfilled" CssClass="form-control" runat="server" Enabled="False" MaxLength="3" ng-model="filled" ValidationGroup="up"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*Required" SetFocusOnError="true" Display="Dynamic" ControlToValidate="textboxfilled" ValidationGroup="up" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RequiredFieldValidator>
                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Only digits allowed" ValidationExpression="(^([0-9]*|\d*\d{1}?\d*)$)" SetFocusOnError="true" Display="Dynamic" ControlToValidate="textboxfilled" ValidationGroup="up" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RegularExpressionValidator>
                                            </div>
                                            <div class="col-lg-3">
                                                <label class="bold">Vaccant: <span class="red">*</span></label>
                                                <asp:Label ID="lblvaccant" runat="server" Text="" CssClass="form-control"></asp:Label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label class="bold">Enter Subject Wise Vaccancy: <span class="red">*</span></label>
                                                <asp:Repeater ID="repeatersubjectwiserpt" runat="server" DataSourceID="SqlDataSource2Getsubjects">
                                                    <HeaderTemplate>
                                                        <table class="table">
                                                            <thead class="thead-light">
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Subjects</th>
                                                                    <th>No. Of Vaccancy</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                        <tr>
                                                            <td>
                                                                <asp:CheckBox ID="chkRow" runat="server" Style="padding: 4px;" Enabled="false" /></td>
                                                            <td><%# Server.HtmlEncode(Eval("subname") as string) %>
                                                                <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Server.HtmlEncode(Eval("id") as string) %>' />
                                                            </td>
                                                            <td>
                                                                <asp:TextBox ID="textboxnoofvaccancy" runat="server" Enabled="false" CssClass="form-control" ClientID="textboxnoofvaccancy" MaxLength="3"></asp:TextBox></td>
                                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator16" runat="server" ErrorMessage="*Required" SetFocusOnError="true" Display="Dynamic" ControlToValidate="textboxnoofvaccancy" InitialValue="0" ValidationGroup="" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RequiredFieldValidator>
                                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ErrorMessage="Only Numbers Max. 3 Digit" ValidationExpression="(^([0-9]*|\d*\d{1,3}?\d*)$)" SetFocusOnError="true" Display="Dynamic" ControlToValidate="textboxnoofvaccancy" ValidationGroup="" ForeColor="Red" Font-Italic="true" Font-Size="11px" EnableClientScript="true"></asp:RegularExpressionValidator>
                                                        </tr>
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        </tbody>
                                                      </table>
                                                    </FooterTemplate>
                                                </asp:Repeater>
                                                <asp:SqlDataSource ID="SqlDataSource2Getsubjects" runat="server" ConnectionString="<%$ ConnectionStrings:schoolmasterdbconstr %>" SelectCommand="SELECT [subject_id] as 'id',[subject_name] as 'subname' FROM [subject_master] order by subject_name asc"></asp:SqlDataSource>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </asp:Panel>
                    <div class="row">
                        <div class="col-lg-12">
                            <center><asp:Button ID="btnSubmit" runat="server" Text="Edit" CssClass="btn btn-success" Width="120px" OnClick="btnSubmit_Click"/>
                              &nbsp;<asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible="false" Width="120px" OnClick="btnCancel_Click" CssClass="btn btn-success" CausesValidation="false"/>
                     <br /><br />
                    </center>
                        </div>
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="ddlposttype" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <center>
                        <asp:Repeater ID="repeater1" runat="server" DataSourceID="SqlDataSource1">
                            <HeaderTemplate>
                                <table class="table">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Sanctioned</th>
                                            <th>Filled</th>
                                            <th>Surplus</th>
                                            <th>Vacant</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td><%# Server.HtmlEncode(Eval("posttype") as string) %></td>
                                    <td><%# Server.HtmlEncode(Eval("sanctioned") as string) %></td>
                                    <td><%# Server.HtmlEncode(Eval("filled") as string) %></td>
                                    <td><%# Server.HtmlEncode(Eval("surplus") as string) %></td>
                                    <td><%# Server.HtmlEncode(Eval("vaccant") as string) %></td>
                                </tr>
                            </ItemTemplate>
                            <FooterTemplate>
                                </tbody>
                                            </table>
                            </FooterTemplate>
                        </asp:Repeater>
                            </center>
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:schoolmasterdbconstr %>" SelectCommand="SELECT top 5 'posttype' as 'posttype',[sprincipal] as 'sanctioned', [fprincipal] as 'filled', [surlecturar] as 'surplus', [vprincipal] as 'vaccant' FROM [staff_strength_details]"></asp:SqlDataSource>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
</asp:Content>

Kindly suggest any help.


Posted one month ago Modified on one month ago

Sir I am having checkbox in repeater on each row. When it get checked and unchecked the the function should fire. How should i call the function on checkbox to fire below event 

I have modified below script as you have provided reference but the function is not firing. 

<script type="text/javascript">
        //$(function () {
            //On UpdatePanel Refresh
        debugger;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {

                        //
                        $("[id*=chkRow]").bind("click", function () {
                            //Find and reference the GridView.
                            var grid = $(this).closest("table");

                            //Find and reference the Header CheckBox.
                            var chkHeader = $("[id*=chkHeader]", grid);

                            //If the CheckBox is Checked then enable the TextBoxes in thr Row.
                            if (!$(this).is(":checked")) {
                                var td = $("td", $(this).closest("tr"));
                                //td.css({ "background-color": "#FFF" });
                                $("input[type=text]", td).val = null;
                                $("input[type=text]", td).attr("disabled", "disabled");
                            } else {
                                var td = $("td", $(this).closest("tr"));
                                //td.css({ "background-color": "#D8EBF2" });
                                $("input[type=text]", td).removeAttr("disabled");
                            }

                            //Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
                            if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
                                chkHeader.attr("checked", "checked");
                            } else {
                                chkHeader.removeAttr("checked");
                            }
                        });
                        //

                    }
                });
            };
            //Enable Disable TextBoxes in a Row when the Row CheckBox is checked.

        //});
    </script>

 



Posted one month ago

Yes sir,

below errors I am getting on browser console

  1. Failed to load resource: the server responded with a status of 404 (Not Found)WebForm1.aspx:11
  2. Uncaught ReferenceError: $ is not defined at WebForm1.aspx:11
    WebForm1.aspx:49
  3. Uncaught ReferenceError: Sys is not defined at WebForm1.aspx:49

Posted one month ago

Hi Sumeet,

$ is not defined

This error can only be caused by one of the following:

  • Your JavaScript file is not being properly loaded into your page
  • You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
  • You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

Make sure all jQuery JavaScript code is being run inside code block:

$(document).ready(function () {
  //your code here
});

Sys is not defined

Check Sys using undefined condition.

if (typeof(Sys) !== 'undefined') {

}

Add the following on web.config

Under <assemblies> section

<add assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

 Under <httpHandlers> section

<add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>