asp.net - Problem with textbox inside updatepanel - not causing OnTextChanged event

Question

I have the following situation: I have a textbox inside an ajax updatepanel. Wherever the user types in the textbox I must display a message (different message that depends on the user typed data).

     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:TextBox ID="txtMyTexbox" runat="server" Width="500px" OnTextChanged="txtMyTexbox_TextChanged" AutoPostBack="true"></asp:TextBox>
            <br />
            <asp:Label ID="lblMessage" runat="server" CssClass="errorMessage" Visible="false">Hello World</asp:Label>
         </ContentTemplate>
            <Triggers>
             <asp:AsyncPostBackTrigger ControlID="txtMyTexbox" />
            </Triggers>
      </asp:UpdatePanel>

In server side I have written the following at page load

ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(txtMyTexbox);           

and the method like this

protected void txtMyTexbox_TextChanged(object sender, EventArgs e)
    {           
            if (.....)
            {
                lblMessage.Visible = false;
            }
            else
            {
                lblMessage.Visible = true;
            }            
    }

My problem now is that: when the user types in the textbox it doesn't cause OnTextChanged event.

Am I missing something?

Answer 1

I'm not sure that your problem has anything to do with the UpdatePanel.

In fact, the TextChanged event doesn't fire while typing. It will only fire after the textbox loses focus. This happens directly if AutoPostBack is set to True, or when the next postback occurs. Please see the docs for the AutoPostBack property and the TextChanged event.

Afaik, your best bet is probably to handle the keyup event in javascript.

Here's a simple jQuery example:

$(document).ready(function() {
    $(':text[id$=YourTextBox]').keyup(function() {
        if ($(this).val() === "your special value") {
            $('span[id$=YourLabel]').css('visibility', 'visible');
        }
        else {
            $('span[id$=YourLabel]').css('visibility', 'hidden');
        }
    });
});