locked
TextBox keyup inside UpdatePanel RRS feed

  • Question

  • User-1961189937 posted

    I'm trying to use a jQuery keyup on an asp TextBox to do an ajax call, but the method doesn't fire. Here is my code:

    <script type="text/javascript">
        $('.search').keyup(function () {
            // ajax call code
    
            __doPostBack('<%= txtSearch.ClientID %>', '');
        });
    </script>
    
    <asp:UpdatePanel ID="uPanel" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
        <ContentTemplate>
            ...
            <asp:TextBox ID="txtSearch" runat="server" CssClass="search" data-name="name" data-type="type"></asp:TextBox>
            ...
        </ContentTemplate>
    </asp:UpdatePanel>

    I've tried using $('<%= txtSearch.ClientID %>') instead of $('.search') as well, but get the same result

    Wednesday, September 14, 2016 12:46 PM

Answers

  • User-1642217485 posted

    Hi,

    I find this codes will work well.

    <script type="text/javascript">
     $(function() {
        $('.search').keyup(function () {
            // ajax call code
    
            __doPostBack('<%= txtSearch.ClientID %>', '');
        });
    });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 22, 2016 2:19 PM
  • User283571144 posted

    Hi picko,

    picko

    I'm trying to use a jQuery keyup on an asp TextBox to do an ajax call, but the method doesn't fire. Here is my code:

    As bruce says, you have two issue.

    But his codes have a little problem.

    I suggest you could refer to follow codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="../Scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
     $(function() {
         $('#<%= uPanel.ClientID %>').on('keyup', '.search', function () {
             //....ajax here
            __doPostBack('<%= txtSearch.ClientID %>', '');
         });
    });
    </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
      
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="uPanel" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
        <ContentTemplate>
                  <asp:TextBox ID="txtSearch" runat="server"  CssClass="search" data-name="name" data-type="type"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
    
         protected void Page_Load(object sender, EventArgs e)
            {
                if (IsPostBack)
                {
                    if (Label1.Text == "tre")
                    {
                        Label1.Text = "tre1";
                    }
                    else
                    {
                        Label1.Text = "tre";
                    }
                }
            }
    

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 23, 2016 8:20 AM

All replies

  • User-474980206 posted

    you have two issues, your javascript is attaching before the dom object exists, and if you fixed that, the update panel deletes and replaces the dom object. try:

    <script type="text/javascript">
      $(function() {
         $('#<%= uPanel.ClientID %>').on('.keyup,'.search',function () {
            // ajax call code
    
            __doPostBack('<%= txtSearch.ClientID %>', '');
         });
    });
    </script>

    Wednesday, September 14, 2016 3:03 PM
  • User-1642217485 posted

    Hi,

    I find this codes will work well.

    <script type="text/javascript">
     $(function() {
        $('.search').keyup(function () {
            // ajax call code
    
            __doPostBack('<%= txtSearch.ClientID %>', '');
        });
    });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 22, 2016 2:19 PM
  • User283571144 posted

    Hi picko,

    picko

    I'm trying to use a jQuery keyup on an asp TextBox to do an ajax call, but the method doesn't fire. Here is my code:

    As bruce says, you have two issue.

    But his codes have a little problem.

    I suggest you could refer to follow codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="../Scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
     $(function() {
         $('#<%= uPanel.ClientID %>').on('keyup', '.search', function () {
             //....ajax here
            __doPostBack('<%= txtSearch.ClientID %>', '');
         });
    });
    </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
      
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="uPanel" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
        <ContentTemplate>
                  <asp:TextBox ID="txtSearch" runat="server"  CssClass="search" data-name="name" data-type="type"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
    
         protected void Page_Load(object sender, EventArgs e)
            {
                if (IsPostBack)
                {
                    if (Label1.Text == "tre")
                    {
                        Label1.Text = "tre1";
                    }
                    else
                    {
                        Label1.Text = "tre";
                    }
                }
            }
    

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 23, 2016 8:20 AM