Question posted in
You can find the official documentation here.

display a spinner during data processing – Jquery ajax

I have written a django application for some data processing. In some cases, there could several minutes to wait until the processing is done. So I’d like to display a spinner on the page as soon as the user clicked on "excute" and all along the processing until the page is refreshed to display the results…
I followed a tutorial (here) where I could set things up on the application and show the spinner when the page is loading. But this is not exactly what I’m looking for.

The follwing JS code is coming from the video and shows the spinner until the page is loaded:

const spinnerbox = document.getElementById('spinner-box')
//console.log(spinnerbox)

$.ajax({
    type: 'GET',
    url: '/',
    success : function(response){
        spinnerbox.classList.add('not-visible')
        console.log('response', response)
    },
    error : function(error){
        console.log(error)
    }
})

I guess I need to modify this code, type should be ‘POST’ but I don’t know what to add next to the script.
Thanks for any help!

[EDIT]
I was able to go a little bit further using this code:

const spinnerbox = document.getElementById(‘spinner-box’)
const submitbox = document.getElementById(‘submit-box’)

submitbox.addEventListener(‘mouseup’, ()=>{
spinnerbox.classList.remove(‘not-visible’)

  $.ajax({
      type: 'POST',
      url: '/',
      success : function(response){
          spinnerbox.classList.add('not-visible')
          console.log('response is success')
      },
      error : function(error){
          console.log('error')
          console.log(error)
          //spinnerbox.classList.add('not-visible')
      },
      // shows the loader element before sending.
      beforeSend: function() {
          console.log('In beforeSend...')
          //show spinner
          spinnerbox.classList.remove('not-visible')
      },
      // hides the loader after completion of request, whether successfull or failor.             
      complete: function() {
          console.log('In complete...')
          //spinnerbox.classList.add('not-visible')
      },
  })

})

But I guess this not clean. When I inspect using the browser, here is what happens:

In beforeSend... main.js:24:21
XHRPOSThttp://127.0.0.1:8000/
error main.js:18:21
Object { readyState: 0, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e)
, … }
​
abort: function abort(e)​
always: function always()​
catch: function catch(e)​
done: function add()​
fail: function add()​
getAllResponseHeaders: function getAllResponseHeaders()​
getResponseHeader: function getResponseHeader(e)​
overrideMimeType: function overrideMimeType(e)​
pipe: function pipe()​
progress: function add()​
promise: function promise(e)
​
readyState: 0
​
setRequestHeader: function setRequestHeader(e, t)​
state: function state()
​
status: 0
​
statusCode: function statusCode(e)
​
statusText: "error"
​
then: function then(t, n, r)​
<prototype>: Object { … }
main.js:19:21
In complete...

Sébastien

Tags:

4

Answers


  1. 0

    You can use the, ajax allows you use beforeSend to add an action and also complete will run when the ajax is done regardless of success or fail.

    const spinnerbox = document.getElementById('spinner-box')
$.ajax({
    type: 'GET',
    url: '/',
    success : function(response){
        spinnerbox.classList.add('not-visible')
        console.log('response', response)
    },
    error : function(error){
        console.log(error)
    },
  // shows the loader element before sending.
  beforeSend: function() {
    //show spinner
 spinnerbox.classList.add('visible')
  },
  // hides the loader after completion of request, whether successfull or failor.             
  complete: function() {
    spinnerbox.classList.add('not-visible')
  },
});
    Login or Signup to reply.
  2. 0

    The most simple approach would be:
    Create a spinner element with the not-visible class.
    Right before the API-Call, set the spinner to visible (remove the not-visible class).
    After the API Call, be it success or error, set it to not-visible again.

    Login or Signup to reply.
  3. 0

    Your server need return a json to show data in same page or you can redirect to another url.

      function sendViaAjax(){

    const spinnerbox = document.getElementById('spinner-box') // Get spinner

    spinnerbox.classList.add('visible') // turn spiner visible 
    $.ajax({
      type: 'POST', 
      url: '/url ', // you send data
      dataType: 'json',
      success : function(response){
        spinnerbox.classList.add('not-visible')

        console.log('response', response)
        window.location = "/url" // url you show data
        
      },
      error : function(error){
        console.log(error)
      }
   })

 }
    Login or Signup to reply.
  4. 0

    Just forget what the guy did in the video about setting a class not-visible. Just set a inline style on the div to display:none.

    Spinner div:

    <div class="text-center">
    <div class="spinner-border" role="status" style="display:none">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

    Now within your js you can even use a fadeIn and fadeOut effect since you have tagged your question with jQuery as well.

    Within your js call:

    const spinnerbox = $(".spinner-border");

// Fade in effect to start displaying the spinner div as the process starts...
spinnerbox.fadeIn(1000); 

$.ajax({
    type: 'POST',
    url: '/',
    data: whatever data to be processed here,

    success : function(response){
        // Fade out effect to stop displaying the spinner div as the process ends...
        spinnerbox.fadeOut(1000); 
        console.log('response', response);
    },

    error : function(error){
        // Fade out effect to stop displaying the spinner div as the process ends...
        spinnerbox.fadeOut(1000);
        console.log(error);
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search