Results 1 to 1 of 1

Thread: [RESOLVED] Javascript Spinner visibility question

  1. #1

    Thread Starter
    Member
    Join Date
    Oct 2021
    Posts
    38

    Resolved [RESOLVED] Javascript Spinner visibility question

    I am using this spinner code below :

    Code:
    		<div id="spinner" style="visibility:hidden;" class="text-center">
    		  <div class="spinner-border" role="status"></div>
    		</div>
    And set the javascript visibility below:

    Code:
    function loadXMLDoc() {
      const xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState !== 4 || xhttp.status !== 200 || !xhttp.responseText) {
          document.getElementById('spinner').style.visibility = "visible";
          loadXMLDoc();
          return;
        }
        document.getElementById('spinner').style.visibility = "hidden";
        document.getElementById('p1').innerHTML = xhttp.responseText;
      };
      document.getElementById('spinner').style.visibility = "visible";
      xhttp.open("POST", "manage.php", true);
      xhttp.send();
    }
    The code works but I noticed that even after successful retrieval of the responseText, the spinner visibility will show from time to time.
    Why is this happening ? Is it perhaps of the xhttp.onreadystatechange ?

    Update: I confirm that it is because of the xhttp.onreadystatechange. But which one should be used ? the onload or onreadystatechange ?

    FOLLOW UP QUESTION: Can I do xhttp.abort(); after the const xhttp = new XMLHttpRequest(); or where should I properly place the abort method. My reason is that if the processing takes time, the user can click the button again to retry the process.
    Last edited by UserBee; Nov 5th, 2021 at 08:17 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width