0

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

4 Answers 4

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')
  },
});
3
  • Hello, I used your code. Just modified the beforeSend function: ` beforeSend: function() { //show spinner spinnerbox.classList.remove('not-visible'). ` The spinner is not visible during the processing at all..
    – sebo
    Jul 22, 2021 at 14:16
  • I added some traces in the code: ``` In beforeSend... main.js:18:17 XHRGEThttp://127.0.0.1:8000/ [HTTP/1.1 200 OK 18ms] response is success main.js:10:17 In complete... main.js:24:17 ```
    – sebo
    Jul 22, 2021 at 14:22
  • whats the end point your trying to reach? lemme give it a try on my end
    – Schnecke
    Jul 23, 2021 at 2:16
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.

1
  • Hi @Sebastian, thanks. Could you describe what you mean by (or how you'd do "Right before the API-Call and after the API-Call"
    – sebo
    Jul 22, 2021 at 14:26
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)
      }
   })

 }

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);
    }
});
1
  • Hello @Moi Myazz, The data is not processed using the JS but in a python view (this is a django application).
    – sebo
    Jul 23, 2021 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.