Dear all,
I have some text boxes which hold numbers which are calculated from other text boxes using javascript. This works fine.
My problem is that I have put some these boxes (as well as many other controls etc) inside an Ajax Update Panel and as soon as the panel updates, it resets my textboxes back to their default value. This does not happen after a postback without the update panel.
Can anyone tell me why this is and how I may fix it?
Thanks for your help.
It sounds like the calculation might be taking place on the client-side after the partial postback has already begun. What triggers the calculation? What triggers the partial postback of the UpdatePanel?
The clientside calculation has already taken place and is visible on screen. This is done my an onchange event on the textboxes. The AJAX partial postback in the update panel is done afterwards only on the press of a button.
Thanks
Are the changes visible when the postback begins or just when it ends? With UpdatePanels, client side changes that happen during the partial postback will be lost when the async postback completes. For instance, if someone hits enter in one of the TextBoxes, would the partial postback initiate before the client side calculation completes?
Another common problem is code running in Page_Load that resets the TextBoxes each postback. You might consider stepping through the entire partial postback with the debugger and make sure that no unexpected code is being run.
If it's none of that, post some code. I'll take a look at it for you.
The changes are visible when the postback begins. The whole thing works perfectly if it is not in an update panel There is nothing in the page_load to reset anything.
The page/code is large to I have put an example below. Put a 1 in the first text box and tab and the second textbox will display a converted amount. Click the button to postback and the values will stay. Put all the controls in an update panel and the postback resets my calculated amount.
I'm so stuck here. Really appreciate your help.
thanks
<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server">
<title>Example</title>
<scriptlanguage="javascript"type="text/javascript">
function convertMeasures()
{
convertedWeight=document.getElementById("<%=MetricWeight.ClientID %>");totalWeight=document.getElementById("<%=Weight.ClientID %>").value;lbsinkilos=2.20462262;
convertedWeight.value=totalWeight/lbsinkilos;
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div><asp:TextBoxID="Weight"runat="server"onchange="convertMeasures();"Style="position: relative"></asp:TextBox>
<asp:TextBoxID="MetricWeight"runat="server"Style="position: relative"></asp:TextBox><br/>
<br/>
<asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Style="position: relative"
Text="Postback Nothing"Width="137px"/>
</div>
</form></body></html>
I just tried using the Infragistics Update Panel and it works fine. The values are retained after postback. Unfortunalty I'm not allowed to use infragistics in this application. :-(
thanks
Using this code, I wasn't able to reproduce.
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Try that code and see if you can reproduce the problem that you're having.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Example</title
<script language="javascript" type="text/javascript">
function convertMeasures()
{
convertedWeight=document.getElementById("<%=MetricWeight.ClientID%>");
totalWeight=document.getElementById("<%=Weight.ClientID%>").value;
lbsinkilos=2.20462262;
convertedWeight.value=totalWeight/lbsinkilos;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="sm1" />
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<asp:TextBox ID="Weight" runat="server" onchange="convertMeasures();" />
<asp:TextBox ID="MetricWeight" runat="server" /><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Postback Nothing" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Hello
ok - I have found what it is that causes the problem, although not the answer. The problem only occurs when I make the MetricWeight textbox readonly(as I have been to stop users altering the result of the calculation). Code below. Strangly this now seems to happen even if there is no Ajax. Do you know how I can stop this?
Thank you for your time
<%@.PageAutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Language="C#" %>
<%@.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI"TagPrefix="asp" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Example</title>
<scriptlanguage="javascript"type="text/javascript">function convertMeasures(){
convertedWeight=document.getElementById("<%=MetricWeight.ClientID %>");
totalWeight=document.getElementById("<%=Weight.ClientID %>").value;lbsinkilos=2.20462262;
convertedWeight.value=totalWeight/lbsinkilos;
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="sm1"runat="server">
</asp:ScriptManager>
<asp:UpdatePanelID="up1"runat="server">
<contenttemplate><asp:TextBoxID="Weight"runat="server"onchange="convertMeasures();"/>
<asp:TextBoxID="MetricWeight"runat="server"BackColor="LightGray"ReadOnly="True">0</asp:TextBox>
<asp:LabelID="Label1"runat="server"Style="position: relative"Text="Label"></asp:Label><br/><br/>
<asp:ButtonID="Button1"runat="server"Text="Postback Nothing"/></contenttemplate>
</asp:UpdatePanel>
</div>
</form></body>
</html>
That'd do it. From theTextBox.ReadOnly documentation:
The Text value of aTextBox control with theReadOnly property set totrueis sent to the server when a postback occurs, but the server does noprocessing for a read-only text box. This prevents a malicious userfrom changing aText value that is read-only.
Probably the easiest workaround is to remove the ReadOnly attribute from the TextBox and add: onfocus="this.blur();"
Alternatively, since the values are still posted to the server, you could reassign each TextBox's value in each postback, using MetricWeight.Value = Request["MetricWeight"].
Thanks for your help. I also used the OnKeyUp event instead of the OnChange to make it work a little better too.
Thanks again!
