Incorporate a loader when making an AJAX request and then conceal it after it has successfully completed

Question

Incorporate a loader when making an AJAX request and then conceal it after it has successfully completed

I find myself a bit puzzled here.

Currently, I'm developing a JavaScript form that sends values to a PHP page (submit.php). If the PHP page returns a success message, I plan to redirect the user to another page (success.php).

var url = 'submit.php';
var furl = 'success.php';
var formdata = new FormData();
formdata.append("name", 'John');
formdata.append('staffid',123);
formdata.append('csrf_test_name',csrf_token);

var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
    uploadcomplete(event,furl);
}, false);
ajax.open("POST", url);
ajax.send(formdata);

function uploadcomplete(event,furl) {
    var response = event.target.responseText.trim();
    if(response=='Failed') {
        alert('Failed');
    } else {
        alert('Success');
        window.location.replace(furl);
    }
}

function showLoader(){
    document.getElementById('loader').style.display = 'block';
}

function hideLoader(){
    document.getElementById('loader').style.display = 'none';
}

However, I want to display a loading icon while the form data is being processed and hide it when the process is complete. To accomplish this, I have created two functions - showLoader() and hideLoader().

Now, my question is, where should I integrate these functions?

javascript ajax

Answer 1

Answer №1

To utilize this functionality, link it with the readyState and the onreadystatechange event:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 0){ 
    displayLoadingAnimation(); 
  } else if(xhr.readyState === 4){
    hideLoadingAnimation();
  }
};

Alternatively, you can invoke them in your script like so:

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(event) {
    processUpload(event, url);
    hideLoadingAnimation(); //<------------------hide the loading animation upon completion.
}, false);
xhr.open("POST", url);
displayLoadingAnimation(); // <------------------trigger the loading animation here.
xhr.send(formData);

Answer 2

To utilize this functionality, link it with the readyState and the onreadystatechange event:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 0){ 
    displayLoadingAnimation(); 
  } else if(xhr.readyState === 4){
    hideLoadingAnimation();
  }
};

Alternatively, you can invoke them in your script like so:

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(event) {
    processUpload(event, url);
    hideLoadingAnimation(); //<------------------hide the loading animation upon completion.
}, false);
xhr.open("POST", url);
displayLoadingAnimation(); // <------------------trigger the loading animation here.
xhr.send(formData);

Answer 3

Answer №2

This is how it should be executed:

During the request process:

ajax.addEventListener("progress", displayLoader);

Upon completion of loading:

ajax.addEventListener("load", removeLoader);

Answer 4

This is how it should be executed:

During the request process:

ajax.addEventListener("progress", displayLoader);

Upon completion of loading:

ajax.addEventListener("load", removeLoader);

Answer 5

Answer №3

If you want to achieve this using Vanilla JavaScript, you can follow the steps below:

function fetchContent() {
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (request.readyState === 4 ) {
           if (request.status === 200) {
               removeLoader();
               // Add your custom logic here after receiving the response from the server
           }
           else {
               console.log('An error occurred...');
           }
        }
    };

    request.open("GET", apiEndpoint);
    request.send(formData);
    displayLoader();
}

Answer 6

If you want to achieve this using Vanilla JavaScript, you can follow the steps below:

function fetchContent() {
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (request.readyState === 4 ) {
           if (request.status === 200) {
               removeLoader();
               // Add your custom logic here after receiving the response from the server
           }
           else {
               console.log('An error occurred...');
           }
        }
    };

    request.open("GET", apiEndpoint);
    request.send(formData);
    displayLoader();
}

Incorporate a loader when making an AJAX request and then conceal it after it has successfully completed

Answer №1

Answer №2

Answer №3

Similar questions

The React onChange event fails to trigger

Implement a jQuery loading animation triggered by scrolling down the page

Issue with dynamic form JavaScript functionality after removing curly braces { } from a select tag in Rails

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

Pagination in Django - perform actions on all objects of all pages

I'm facing an issue where I am only able to update the first record in the database using axios and Post

Nested tables in Datatables retrieving child table rows based on parent table

Leveraging the power of the wildcard feature to execute a variety of scripts when running

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

Looking to update the location of an element within a canvas using Vue and socket.io?

I am in search of a JavaScript or jQuery plugin for an HTML slider with a unique range functionality

Unable to generate a fresh database entry through form submission

What sets apart window.app=new Vue({}) versus const app = new Vue({}) when included in app.js within a Vue.js environment?

The Ajax function I'm using is not successfully sending data to the server-side

Modifying the Trim Function in AngularJS

Is the exchange between Ajax/jQuery and PHP a two-way street?

Incorporating transparent padding to PNG images for a three-dimensional effect

The concept of a callback function is not applicable within the context of MongoDB in Node.js

Why is this loop in jQuery executing twice?

The type 'number' cannot be assigned to the type 'Element'