Javascript doesn't work after a postback

Question

0.00/5 (No votes)

See more:

My javascript loads and runs fine on initial page load. After a postback, it no longer fires any of the alerts I've placed in functions to tell whether they've run. The alert "Page Reload" never pops up at all, but the alert just above it does. The purpose of this script is to count down keystrokes until it hits 0. Can someone please help?

<script type="text/javascript">

  document.addEventListener('DOMContentLoaded', function () {
      const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
      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');

      // Add input event listener for text area
      textArea2.addEventListener('input', function () {
          textCounter(textArea2, 3000, label1, labelRemaining1);
          textCounter2(textArea2, 865, label2, labelRemaining2);
          alert("Event Listener - DOMContentLoaded");
      });
  });

     function textCounter(field, maxlimit, label, label2) {
         if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit);
         else {
            label.innerHTML = maxlimit - field.value.length;
         }

         if (field.value.length > maxlimit - 500) {
            label.style.color = "#FF0000";
            label2.style.color = "#FF0000";
         }
         else {
            label.style.color = "#000000";
            label2.style.color = "#000000";
         }
       alert("textCounter Fired");
     }

     function textCounter2(field, maxlimit, label, label2) {
         if (field.value.length > maxlimit)
         //  field.value = field.value.substring(0, maxlimit);
            field.value = field.value;
         else {
            label.innerHTML = maxlimit - field.value.length;
         }

         if (field.value.length > maxlimit - 200) {
            label.style.color = "#FF0000";
            label2.style.color = "#FF0000";
         }
         else {
            label.style.color = "#000000";
            label2.style.color = "#000000";
         }
       alert("textCounter2 Fired");
     }

     $(document).ready(function () {
         alert("Page Initial Load");
         // this supposedly works for initial page load only
         textCounter(textArea2, 3000, label1, labelRemaining1); 
         textCounter2(textArea2, 865, label2, labelRemaining2);
     });
            
     alert(typeof (Sys));

     if (typeof (Sys) !== 'undefined') {
          alert("Sys");
         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
              alert("Page Reload");
              // this supposedly works after postback
              textCounter(textArea2, 3000, label1, labelRemaining1);          
              textCounter2(textArea2, 865, label2, labelRemaining2);
          });
     }

        </script>

What I have tried:

I tried adding the two functions at the end, which I saw on another similar question. It didn't work for me, and as I said above, the Javascript code never runs the "Page Reload" alert either on initial load or after postback.

After a little more research, it appears add_endRequest is only available for asynchronous postback. My page has no update panels, so I may need to explore a different avenue.

Posted 12-Sep-24 2:41am

John Chief

Updated 12-Sep-24 3:25am

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2024-09-12T04:00:00

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:

JavaScript

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);
    });
}