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