locked
how to make textchanged event works when textbox place in update panel? RRS feed

  • Question

  • User-1585918428 posted

    Dear All Experts,

    Good day.

    I have a textboxt which I set the autopostback to true. And when there is textchanged in the textbox, the textchanged event will fire and execute as per the codes i wrote.
    It works well when i debug, however the autopostback make the webpage refresh each time the textchanged event is fired.

    To prevent the page refresh, I move the textbox into a update panel. I found the textchanged event is not firing after I move the textbox into updatepanel.

    What should i do to make the textchanged event fire?

    thanks in advance for advice.

    regards
    garf

    Tuesday, June 26, 2018 8:41 AM

All replies

  • User-1171043462 posted

    TextChanged event will fire in UpdatePanel also provided there is no JavaScript error or some code is preventing PostBack.

    Tuesday, June 26, 2018 8:53 AM
  • User632428103 posted

    Hello all,

    @garfchong => why don't you use jquery change event ? 

    here is it a little sample :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../../../Scripts/jquery-2.0.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                //
                $('#txtInput').keyup(function () {
                    alert($('#txtInput').val());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            Enter your name :
            <input type="text" id="txtInput">
        </form>
    </body>
    </html>

    Tuesday, June 26, 2018 9:24 AM
  • User-1585918428 posted

    TextChanged event will fire in UpdatePanel also provided there is no JavaScript error or some code is preventing PostBack.

    But I'm using vb...

    Tuesday, June 26, 2018 10:01 AM
  • User-1585918428 posted

    Hello all,

    @garfchong => why don't you use jquery change event ? 

    here is it a little sample :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../../../Scripts/jquery-2.0.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                //
                $('#txtInput').keyup(function () {
                    alert($('#txtInput').val());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            Enter your name :
            <input type="text" id="txtInput">
        </form>
    </body>
    </html>

    Thanks for the sample given. I'll try. In fact, is it possible to do it using vb code? thanks

    Tuesday, June 26, 2018 10:02 AM
  • User-1171043462 posted

    Share your code

    Tuesday, June 26, 2018 10:12 AM
  • User632428103 posted

    for me it's not a best solution to use textChanged as event on code behind ..because the page is refresh but here is it a little sample 

    <asp:UpdatePanel ID ="updt1" runat ="server" >
           <ContentTemplate >
           <asp:TextBox ID="txt" runat ="server" ></asp:TextBox>
           </ContentTemplate>
           <Triggers >
           <asp:AsyncPostBackTrigger ControlID ="txt" EventName ="TextChanged" />
           </Triggers>
           </asp:UpdatePanel>
    
    Protected Sub txt_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txt.TextChanged
           Response.Write("Hello asp net")
       End Sub
    

    the best solution for me it's to used jquery change event more efficiant ..

    Tuesday, June 26, 2018 1:54 PM
  • User-1171043462 posted

    You are using VB, but UpdatePanel uses Javascript to update data without PostBack

    Tuesday, June 26, 2018 2:06 PM
  • User-330142929 posted

    Hi Garfchong,

    According to your description, I think you may forget to set AutoPostBack=true. In some cases it will not work correctly.

    Besides, why do you want to use Reponse.write(), do you want to register the script to the frontend? What needs to be mentioned is that the response.write doesn’t work here. No Postback is involved here. If you want to register the script to the frontend, I suggest you could use the following method.

    Aspx.

                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
                        <br />
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
                    </Triggers>
                </asp:UpdatePanel>

    Code behind.

        Protected Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextBox1.TextChanged
            'Response.Write("Hello asp net")
            ScriptManager.RegisterClientScriptBlock(UpdatePanel1, Me.GetType(), "", "alert('" + TextBox1.Text + "')", True)
     
    End Sub

    How it works. Please note the upper left corner refresh bar.

    Feel free to let me know if you have any question.

    Best Regards,

    Abraham

    Wednesday, June 27, 2018 7:39 AM
  • User-1585918428 posted

    Hi Abraham,

    Thanks for comment. Actually I didn't want to use response.write. Instead, after user keyin the textbox, there will be series of code to read from database and compare the data in database. 

    I'm using Microsoft visual web developer, and I do set the autopostback to true.  Everything work well when the textbox is not in update panel. and it doesnt work if i locate the textbox in update panel...  i do include the <trigger> tag but it still not working..

    wondering what went wrong.

    thanks and regards
    Garf

    Saturday, June 30, 2018 4:19 PM
  • User-1171043462 posted

     <asp:TextBox ID="txt" runat ="server" ></asp:TextBox>

    AutoPostBack="True" is missing

     <asp:TextBox ID="txt" runat ="server" AutoPostBack= "True" ></asp:TextBox>

    Saturday, June 30, 2018 6:33 PM