bootstrap 5 loading spinner in modal during xmlhttprequest-CodePudding

i'm making a xmlhttprequest in javascript and i'm using a bootstrap spinner in a modal to show the user its loading, it toggles the modal fine but can't hide it once loading is finished?

I'm trying to do this in vanilla javascript, since i'm more familiar with it, but i can use jquery if needed :]

I'm using google.com as an example for privacy reasons

var once = 0;
var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var modal = new bootstrap.Modal(document.getElementById("loading"), {});
            modal.hide();
        }
        else {
            if (once == 0) {
            var modal = new bootstrap.Modal(document.getElementById("loading"), {});
            modal.show();
            once  ;
            }
        }
    };
    xhttp.open("GET", "google.com", true);
    xhttp.send();

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div  style="background: none !important;" id="loading" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div  style="background: none !important;">
    <div  style="background: none !important; border: none;">
      <div  style="background: none !important; text-align: center;">
        <div  role="status">
            <span >Loading...</span>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated. Thanks!

CodePudding user response：

try declaring modal variable once and set variable once before modal show

  var once = 0;
    var modal = new bootstrap.Modal(document.getElementById("loading"), {});
    var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                modal.hide();
            }
            else {
                if (once == 0) {
    
                once  ;
                modal.show();
                } else {
                  modal.hide();
                }
            }
        };
        xhttp.open("GET", "google.com", true);
        xhttp.send();

CodePudding user response：

fetch and async functions are widely supported so there's no reason to use XMLHttpRequest:

async getData() {
  const modal = new bootstrap.Modal(document.getElementById("loading"), {});
  modal.show();

  try {
    const resp = await fetch('your-url', /* options */);
    if (resp.ok) { // 20x response
      const content = await resp.text(); // or resp.json() if JSON formatted data
      // do something with the data
    } else {
      // some error handling
    }
  } catch (error) {
    // some error handling
  } finally {
    // because you probably don't want the spinner 
    // showing past the end of the request, even on error
    modal.hide();
  }
}