Alex Rivera | Logout

Problem with textbox inside updatepanel - not causing OnTextChanged event

Asked 2009-05-05T17:26:16.507
12

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?

asp.net ajax updatepanel
Edit
Report

2 Answers

6

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');
        }
    });
});
answered 2009-10-22T12:09:37.243
0

a workaround check textbox - causesvalidation property and set it to true

answered 2010-05-13T16:20:17.943

Your Answer