When the page is reloaded using an
UpdatePanel
, the DOM is replaced with the data returned by an AJAX request. The references you have cached via
document.getElementById
are no longer valid; they are referring to orphaned elements which are no longer part of the DOM.
You can either replace those references and re-add the event handlers when the page reloads, or use
delegated event handlers[
^] to handle the events. Event delegation is probably the safest, since it avoids leaking any references to orphaned DOM elements:
function textCounter(field, maxlimit, label, label2) { ... }
function textCounter2(field, maxlimit, label, label2) { ... }
function textCounterFollowUpAnswer2(field) {
const label1 = document.getElementById('Label_Answer_Char_Count');
const label2 = document.getElementById('Label_Answer_Char_Count2');
const labelRemaining1 = document.getElementById('Label_Answer_Char_Remaining');
const labelRemaining2 = document.getElementById('Label_Answer_Char_Remaining2');
textCounter(target, 3000, label1, labelRemaining1);
textCounter2(target, 865, label2, labelRemaining2);
}
document.addEventListener('input', function (e) {
const target = e.target;
if (target.id === 'TextBox_Follow_Up_Answer2') {
textCounterFollowUpAnswer2(target);
alert("Event Listener");
}
});
document.addEventListener('DOMContentLoaded', function () {
alert("Page Initial Load");
const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
textCounterFollowUpAnswer2(textArea2);
});
if (typeof (Sys) !== 'undefined') {
alert("Sys");
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
alert("Page Reload");
const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
textCounterFollowUpAnswer2(textArea2);
});
}