bootstrap 5 loading spinner in modal during xmlhttprequest

userzC8k1 0
Viewed 51

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/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="modal" style="background: none !important;" id="loading" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" style="background: none !important;">
    <div class="modal-content" style="background: none !important; border: none;">
      <div class="modal-body" style="background: none !important; text-align: center;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated. Thanks!

bootstrap5-modal bootstrap-5 javascript css html
2 Answers

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();
Mai Truong0

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();
  }
}
J. Titus0
Related