locked
jQuery not getting invoked RRS feed

  • Question

  • User-73514677 posted

    Hi,

    I have a button, in which I want to do validations and then do the server side processing. I have tried the below code, but jQuery is not getting called.

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            BindButtonClickEvent();
        });
    
        function BindButtonClickEvent() {
            $("#<%= btnLogin.ClientID %>").click(function () {
    
                var txtUserid = $("#<%=txtUserId.ClientID%>");
                if (txtUserid.val() == "") {
                    alert("Please enter User ID");
    
                }
                var txtpwd = $("#<%=txtPassword.ClientID%>");
                if (txtpwd.val() == "") {
                    alert("Please enter Password");
                }
    
                var chkagree = $("#<%=chkAgree.ClientID%>");
                if (chkagree.is(':checked'))
                {
    
                }
                else
                {
                    alert("Please agree the disclaimer");
                }
               
                });
            }
    
    </script>
    
     <script>
         //Re-Create for on page postbacks
         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(function () {
             //On each pageload check the selected value in dropdownllist
             $(document).ready(function () {
                 BindButtonClickEvent();
             });
    
             function BindButtonClickEvent() {
                 $("#<%= btnLogin.ClientID %>").click(function () {
                //Inorder to access server control you need to use # with the control id
    
                var txtUserid = $("#<%=txtUserId.ClientID%>");
                if (txtUserid.val() == "") {
                    alert("Please enter User ID");
    
                }
                var txtpwd = $("#<%=txtPassword.ClientID%>");
                if (txtpwd.val() == "") {
                    alert("Please enter Password");
                }
    
                var chkagree = $("#<%=chkAgree.ClientID%>");
                if (chkagree.is(':checked')) {
    
                }
                else {
                    alert("Please agree the disclaimer");
                }
    
            });
        }
            });
        </script>
    
    <asp:UpdatePanel ID="updPaneluserLogin" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
    // followed by 2 textbox, 1 check box
    
    <asp:ImageButton ID="btnLogin" runat="server" ImageUrl="/images/Login.jpg" OnClick="btnLogin_Click" />
      
    
        </ContentTemplate>
    </asp:UpdatePanel>

    How to fix this?

    Thanks

    Saturday, January 23, 2016 7:06 AM

Answers

  • User475983607 posted

    Use the ScriptManager.RegisterStartupScript() method to register the BindButtonClickEvent() function on the server.  Plus you'll need to prevent the default event if there is an error; otherwise the form will POST.

    Markup

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jquery1.aspx.cs" Inherits="TestingWeb.jquery.Jquery1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript">
    
            function BindButtonClickEvent() {
                $("#<%= btnLogin.ClientID %>").click(function (e) {
    
                    var isError = false;
    
                    var txtUserid = $("#<%=txtUserId.ClientID%>");
                    if (txtUserid.val() == "") {
                        console.log("Please enter User ID");
                        isError |= true;
    
                    }
                    var txtpwd = $("#<%=txtPassword.ClientID%>");
                    if (txtpwd.val() == "") {
                        console.log("Please enter Password");
                        isError |= true;
                    }
    
                    var chkagree = $("#<%=chkAgree.ClientID%>");
                    if (!chkagree.is(':checked')){
                        console.log("Please agree the disclaimer");
                        isError |= true;
                    }
    
                    if (isError)
                    {
                        console.log("Errors do something");
                        e.preventDefault();
                    }
    
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="updPaneluserLogin" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:TextBox ID="txtUserId" runat="server"></asp:TextBox><br />
                    <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br />
                    <asp:CheckBox ID="chkAgree" runat="server" /><br />
                    <asp:Button ID="btnLogin" runat="server" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace TestingWeb.jquery
    {
        public partial class Jquery1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                ScriptManager.RegisterStartupScript(
                            updPaneluserLogin,
                            this.GetType(),
                            "LoginValidation",
                            "BindButtonClickEvent();",
                            true);
            }
        }
    }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, January 23, 2016 2:34 PM
  • User61956409 posted

    Hi venkatzeus,

    Please refer to the following sample code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script>
            $(function () {
                BindButtonClickEvent();
            })
    
            function BindButtonClickEvent() {
                $("#<%= btnLogin.ClientID %>").click(function () {
    
                    var txtUserid = $("#<%=txtUserId.ClientID%>");
                    if (txtUserid.val() == "") {
                        alert("Please enter User ID");
    
                    }
                    var txtpwd = $("#<%=txtPassword.ClientID%>");
                    if (txtpwd.val() == "") {
                        alert("Please enter Password");
                    }
    
                    var chkagree = $("#<%=chkAgree.ClientID%>");
                    if (chkagree.is(':checked')) {
    
                    }
                    else {
                        alert("Please agree the disclaimer");
                    }
    
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <script>
                            var prm = Sys.WebForms.PageRequestManager.getInstance();
                            if (prm != null) {
                                prm.add_endRequest(function (sender, e) {
                                    if (sender._postBackSettings.panelsToUpdate != null) {
                                        BindButtonClickEvent();
                                    }
                                });
                            };
                        </script>
    
                        <asp:TextBox ID="txtUserId" runat="server"></asp:TextBox>
                        <br />
                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                        <br />
                        <asp:CheckBox ID="chkAgree" runat="server" />
                        <br />
                        <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 25, 2016 8:23 AM

All replies

  • User475983607 posted

    Use the ScriptManager.RegisterStartupScript() method to register the BindButtonClickEvent() function on the server.  Plus you'll need to prevent the default event if there is an error; otherwise the form will POST.

    Markup

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jquery1.aspx.cs" Inherits="TestingWeb.jquery.Jquery1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript">
    
            function BindButtonClickEvent() {
                $("#<%= btnLogin.ClientID %>").click(function (e) {
    
                    var isError = false;
    
                    var txtUserid = $("#<%=txtUserId.ClientID%>");
                    if (txtUserid.val() == "") {
                        console.log("Please enter User ID");
                        isError |= true;
    
                    }
                    var txtpwd = $("#<%=txtPassword.ClientID%>");
                    if (txtpwd.val() == "") {
                        console.log("Please enter Password");
                        isError |= true;
                    }
    
                    var chkagree = $("#<%=chkAgree.ClientID%>");
                    if (!chkagree.is(':checked')){
                        console.log("Please agree the disclaimer");
                        isError |= true;
                    }
    
                    if (isError)
                    {
                        console.log("Errors do something");
                        e.preventDefault();
                    }
    
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="updPaneluserLogin" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:TextBox ID="txtUserId" runat="server"></asp:TextBox><br />
                    <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br />
                    <asp:CheckBox ID="chkAgree" runat="server" /><br />
                    <asp:Button ID="btnLogin" runat="server" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace TestingWeb.jquery
    {
        public partial class Jquery1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                ScriptManager.RegisterStartupScript(
                            updPaneluserLogin,
                            this.GetType(),
                            "LoginValidation",
                            "BindButtonClickEvent();",
                            true);
            }
        }
    }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, January 23, 2016 2:34 PM
  • User61956409 posted

    Hi venkatzeus,

    Please refer to the following sample code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script>
            $(function () {
                BindButtonClickEvent();
            })
    
            function BindButtonClickEvent() {
                $("#<%= btnLogin.ClientID %>").click(function () {
    
                    var txtUserid = $("#<%=txtUserId.ClientID%>");
                    if (txtUserid.val() == "") {
                        alert("Please enter User ID");
    
                    }
                    var txtpwd = $("#<%=txtPassword.ClientID%>");
                    if (txtpwd.val() == "") {
                        alert("Please enter Password");
                    }
    
                    var chkagree = $("#<%=chkAgree.ClientID%>");
                    if (chkagree.is(':checked')) {
    
                    }
                    else {
                        alert("Please agree the disclaimer");
                    }
    
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <script>
                            var prm = Sys.WebForms.PageRequestManager.getInstance();
                            if (prm != null) {
                                prm.add_endRequest(function (sender, e) {
                                    if (sender._postBackSettings.panelsToUpdate != null) {
                                        BindButtonClickEvent();
                                    }
                                });
                            };
                        </script>
    
                        <asp:TextBox ID="txtUserId" runat="server"></asp:TextBox>
                        <br />
                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                        <br />
                        <asp:CheckBox ID="chkAgree" runat="server" />
                        <br />
                        <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 25, 2016 8:23 AM