Wednesday, March 21, 2012

Event handler gets removed after AJAX refresh.

Hi,

I add an event handler on window.onload.
However, this seems to get removed after AJAX refresh.

Following are steps to reproduce behavior.
What may I have missed.

Thanks.
yagimay

[steps]

1. Create an ASP.NET AJAX-Enabled Web Site.
2. Add ScriptManager, UpdatePanel and a TextBox (inside the panel) on web form.
3. Add following script block to web form.

<script type="text/javascript">
window.onload=init;
function init(){
var tx=$get("TextBox1");
$addHandler(tx,"click",txt_click);
}
function txt_click(e){
var tx=e.target;
alert(tx.id+": input numbers.");
}
</script>

4. Add following server side code.

Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged

Dim str As String = TextBox1.Text
If Not IsNumeric(str) Then
str = "N/A"
Else
Dim val As Double = Double.Parse(TextBox1.Text)
str = val.ToString("c")
End If
TextBox1.Text = str

End Sub

5. Debug.
6. Click TextBox.
-- TextBox.onclick event occurs (alert appears).
7. Input anything and press [Enter] key.
-- UpdatePanel refresh and TextBox.Text is updated.
8. Click TextBox.
-- TextBox.onclick event does not occurs anymore.

I was able to get this work by using PageRequestManager.add_pageLoaded instead of window.onload.

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(init);

function init(sender,args){
var tx=$get("TextBox1");
$addHandler(tx,"click",txt_click);
}
function txt_click(e){
var tx=e.target;
alert(tx.id+": input numbers.");
}
</script>

Thanks.

yagimay

No comments:

Post a Comment