How to change asp:Label content in UpdatePanel after update?

Question

I have an asp:Label inside an update panel that I need to update from both the server application and client side Javascript. I can update the label fine before the first UpdatePanel refresh by setting label.innerHTML. The server changes the label correctly during a panel update. After the update, setting label.innerHTML from client Javascript no longer changes the value shown in the browser.

How can I find the label to continue to update it from Javascript after an UpdatePanel update?

Answer 1

The reference to the DOM element you obtained presumably with document.getElementById before the UpdatePanel refresh is no longer valid after the refresh because the label is replaced with a new DOM element. So you need to obtain a new reference to this element and set innerHTML to this new reference.

The events might look like this

1. var label = document.getElementById('some_label'); label.innerHTML = 'abc';
2. UpdatePanel is trigerred which replaces the label inside the DOM
3. label.innerHTML no longer works. You need to repeat step 1) here.

Answer 2

The DOM element is being replaced when the UpdatePanel refreshes. Any references that you have to the previous DOM element are no longer usable, they reference the DOM element that was removed and no longer exists. You'll need to find the replacement DOM element before you'll be able to access its properties. You can do this using document.getElementById('label') or, with jQuery, $('#label'), assuming that you've given it the name label.