This is a migrated thread and some comments may be shown as answers.

Lost Button Click when RadNumericTextBox OnTextChanged called

10 Answers 312 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Mike Bridge asked on 25 Mar 2010, 11:31 PM

Hi-

I'm using a RadAjaxManager with some RadNumericTextBoxes and an asp:Button. The button OnClick and the OnTextChanged are using the RadAjaxManager to update some Labels.

This works fine until I change the value in the RadNumericTextBox and then try to click on the button directly. In this case, it seems to lose the click.

You can reproduce this by:
1) changing the values using the spinner in each of the two rad input boxes to verify that the "lblTotal" label changes.
2) click "OK" to show that the date is updated
3) change a value in one of the RadNumericTextBoxes using the keyboard and then clicking on the OK button directly.

You'll see that the date doesn't update---it's like an event is being lost somewhere. This happens in both Firefox and IE8 on build 2009.02.0826.35.

Any idea what might cause that?

Thanks!

-Mike

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadAjaxProblem.aspx.cs" 
        
                Inherits="Ajax.RadAjaxProblem" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Test Ajax</title> 
        
            </head> 
        
            <body> 
        
             <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="scriptManagerProxy1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="radNumber1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblTotal" UpdatePanelRenderMode="Inline" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="btnOk" UpdatePanelRenderMode="Inline" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="radNumber2"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblTotal" UpdatePanelRenderMode="Inline" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="btnOk" UpdatePanelRenderMode="Inline" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="btnOk"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblMessage" UpdatePanelRenderMode="Inline" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <div style="margin:50px" > 
        
                    <telerik:RadNumericTextBox ID="radNumber1" runat="server" Type="Number" MinValue="1" 
        
                        AutoPostBack="true" NumberFormat-DecimalDigits="0" Width="75px" ShowSpinButtons="true" 
        
                        Value="1" OnTextChanged="OnNumber1Changed" /> 
        
                    plus 
        
                    <telerik:RadNumericTextBox ID="radNumber2" runat="server" Type="Number" MinValue="1" 
        
                        AutoPostBack="true" NumberFormat-DecimalDigits="0" Width="75px" ShowSpinButtons="true" 
        
                        Value="1" OnTextChanged="OnNumber2Changed" /> 
        
                    equals 
        
                    <asp:Label runat="server" ID="lblTotal"></asp:Label>. 
        
                    <p> 
        
                        Message: 
        
                        <asp:Label ID="lblMessage" runat="server" Text="..."></asp:Label> 
        
                    </p> 
        
                    <p> 
        
                        <asp:Button runat="server" ID="btnOk" OnClick="btnOk_Click" Text="OK" /> 
        
                    </p> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System; 
        
            using Telerik.Web.UI; 
        
            namespace Ajax 
        
            { 
        
                public partial class RadAjaxProblem : System.Web.UI.Page 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                    } 
        
                    private void UpdateTotal() 
        
                    { 
        
                        int arg1 = (int) (radNumber1.Value.HasValue ? radNumber1.Value.Value : 0); 
        
                        int arg2 = (int) (radNumber2.Value.HasValue ? radNumber2.Value.Value : 0); 
        
                        lblTotal.Text = String.Format("{0}", arg1 + arg2); 
        
                    } 
        
                    protected void OnNumber1Changed(object sender, EventArgs e) 
        
                    { 
        
                        UpdateTotal(); 
        
                    } 
        
                    protected void OnNumber2Changed(object sender, EventArgs e) 
        
                    { 
        
                        UpdateTotal(); 
        
                    } 
        
                    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) 
        
                    { 
        
                    } 
        
                    protected void btnOk_Click(object sender, EventArgs e) 
        
                    { 
        
                        lblMessage.Text = String.Format("OK clicked at " + DateTime.Now.ToLongTimeString()); 
        
                    } 
        
                } 
        
            }

10 Answers, 1 is accepted

answered on 29 Mar 2010, 04:47 PM

You're right, it looks like the same thing happens with Textboxes wrapped in an UpdatePanel.

I'll look into that further. I assume it has something to do with the postback events conflicting somehow....

Thanks,

-Mike

    
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 
        
                <div> 
        
                    <asp:UpdatePanel runat="server" ID="updatePanel1"> 
        
                        <ContentTemplate> 
        
                            <asp:TextBox runat="server" ID="txtNumber1" AutoPostBack="true" OnTextChanged="OnNumber1Changed"></asp:TextBox> plus                                                
        
                            <asp:TextBox runat="server" ID="txtNumber2" AutoPostBack="true" OnTextChanged="OnNumber2Changed"></asp:TextBox> equals 
        
                            <asp:Label runat="server" ID="lblTotal" AutoPostBack="true"></asp:Label>             
        
                    <p> 
        
                        Message: 
        
                        <asp:Label ID="lblMessage" runat="server" Text="..."></asp:Label> 
        
                    </p> 
        
                    <p> 
        
                        <asp:Button runat="server" ID="btnOk" OnClick="btnOk_Click" Text="OK" /> 
        
                    </p> 
        
                        </ContentTemplate> 
        
                        <Triggers> 
        
                            <asp:AsyncPostBackTrigger ControlID="btnOk" /> 
        
                        </Triggers> 
        
                    </asp:UpdatePanel> 
        
                </div> 
        
                </form>

answered on 29 Mar 2010, 06:21 PM

I don't know why, but it looks like this works if I delete btnOk from the list of UpdatedControls for the two numeric text boxes:

    
              <telerik:AjaxSetting AjaxControlID="radNumber1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblTotal" UpdatePanelRenderMode="Inline" /> 
        
                            </UpdatedControls> 
        
              </telerik:AjaxSetting>

It also works in the UpdatePanel example if I move the button outside the UpdatePanel.

-Mike

answered on 31 Mar 2010, 09:58 AM

Hi Mike,

It seems that there is an issue with input controls events in IE8 after the second ajax request. The DOM elements state is not refreshed/initialized properly and the event handlers are not attached as expected.
We are researching on it however still not able to find a general solution.

You can find a possible workaround, you can try handling the onchange client-side event as below:

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"

onchange="document.documentElement.focus()"

OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

I hope this helps.

Greetings,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.