Search code examples
asp.netajaxasp.net-ajaxupdatepanel

Update Panel - Textbox TextChanged Event is interfering with the DropDown SelectedIndexChanged event

Basics:

  • I have a text box (txtDepositAmount) that people can enter a deposit amount into and a drop down (ddlSelectedTerm) that sets the terms.
  • Through these two values I calculate the APY (lblCurrentApy).

Rules:

  • If only one of the values is selected I still want to do an update on the current APY label and clear it.
  • If either value changes I want to update the current APY and recalculate.

The problem:

As soon as I click away from the textbox and onto the drop down to select my term the drop down flashes and closes because the textbox TextChanged event was just fired.

I have to click on the drop down a second time to be able to select anything!

Do I need to change what event I'm looking at or do I need to move some of the controls outside of the UpdatePanel? Can this only happen if some of the business rules change? Should I just give up and go to javascript?

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table width="100%">
            <tr>
                <td align="left" style="width: 10%" class="LineAlign">
                    &nbsp;
                </td>
                <td align="left" style="width: 40%" class="LineAlign">
                    <asp:Label ID="lblDollarSymbol" runat="server" Text="$"/> 
                    &nbsp;
                    <asp:TextBox ID="txtDepositAmount" runat="server"
                     AutoPostBack="true" TabIndex="1" MaxLength="14" 
                     ontextchanged="txtDepositAmount_TextChanged"/>
                </td>
                <td align="left" style="width: 30%" class="LineAlign">
                    <asp:DropDownList ID="ddlSelectedTerm" runat="server" 
                     AutoPostBack="true" TabIndex="2"
                     onselectedindexchanged="ddlSelectedTerm_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td align="center" style="width: 20%">
                    <asp:Label ID="lblCurrentApy" runat="server"/>
                    &nbsp;
                    <asp:Label ID="lblPercentSymbol" runat="server" Text="%"/>
                </td>
            </tr>
        </table>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlSelectedTerm" />
        <asp:AsyncPostBackTrigger ControlID="txtDepositAmount" />
    </Triggers>
</asp:UpdatePanel>
Solution

  • I ripped out the UpdatePanel and just did jquery. Screw Microsoft.