Quelqu'un pourrait-il m'aider avec un problème? Je souhaite ajouter une barre de processus lorsque vous attendez une réponse du serveur (Django 3.x).
Étape à reproduire:
Donc, je veux ajouter une barre de processus après le 4ème et avant le 5ème points sur la page 'A'. Lorsque vous obtiendrez le résultat sur la page «A», il devrait disparaître.
Python 3.7 Django 3.x
3 Réponses :
Vous pouvez utiliser nprogress , c'est une bibliothèque utilisée pour les barres de progression. Utilisez ceci à l'intérieur de l'intercepteur où vous pouvez le configurer pour l'afficher uniquement lorsque la requête est en cours jusqu'à ce qu'elle soit terminée.
Il existe de nombreuses façons de procéder. Je pense que l'utilisation de jquery serait plus facile. Fondamentalement, il vous suffit d'empêcher la soumission de la page et de faire une requête Ajax au serveur. quelque chose comme
<div id='loadinAnimation' style='display:none'>
<div>loading gif</div>
</div>
et affichez l'animation de chargement appropriée dans votre partie html
<script type='text/javascript'>
$(document).ready(function () {
$("form").submit(function (e) {
// prevent page loading
e.preventDefault(e);
$('#loadinAnimation').show();
// preapre formdata
$.ajax({
type: "yourRequestType",
url: "yourUrlEndpoint",
data: formdata,
success: function (data) {
$('#loadinAnimation').hide();
// do rest of the work with data
}
});
});
});
</script>
Vous pouvez également le faire en utilisant la bibliothèque UiKit en Javascript sur votre page de modèles Django. Le code ci-dessous est lorsqu'un fichier est téléchargé
Dans votre fichier modèle (template.html)
resp_json = {
"status" : 201,
"status_icon" : "success",
"url" : "/",
"message": message
}
return HttpResponse(json.dumps(resp_json))
Sur votre views.py vous pouvez faire votre calcul et une fois terminé, vous peut renvoyer une réponse comme ci-dessous
<body>
..
<form>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
...
<div class="uk-alert-danger uk-margin-top uk-hidden" id="upload_error" uk-alert></div>
...
</form>
</head>
<script type="text/javascript">
$(document).ready(function(){
var bar = document.getElementById('js-progressbar');
UIkit.upload('.js-upload-list', {
url: '',
name : "customer-docs",
params :{
"csrfmiddlewaretoken":"{{csrf_token}}"
},
method : "POST",
concurrent:1,
allow:'*.(csv|xlsx)',
beforeSend: function (environment) {
console.log('beforeSend', arguments);
// The environment object can still be modified here.
// var {data, method, headers, xhr, responseType} = environment;
},
beforeAll: function (args,files) {
console.log('beforeAll', arguments);
},
load: function () {
console.log('load', arguments);
},
error: function (files) {
console.log("---------------")
},
complete: function () {
console.log('complete', arguments);
},
loadStart: function (e) {
console.log('loadStart', arguments);
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
},
progress: function (e) {
console.log('progress', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
loadEnd: function (e) {
console.log('loadEnd', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
completeAll: function (data) {
console.log('completeAll', arguments);
console.log('completeAll', data);
let redirect_loc = ""
setTimeout(function () {
bar.setAttribute('hidden', 'hidden');
}, 1000);
// This is the response from your POST method of views.py
data.responseText = JSON.parse(data.responseText)
if(data.responseText.status == 201){
// swal is another library to show sweet alert pop ups
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Done: true
},
}).then((value) => {
switch (value) {
case "Done":
window.location.href = ""
break;
}
});
}
else if(data.responseText.status == 500){
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Ok: true
},
}).then((value) => {
switch (value) {
case "Ok":
window.location.href = ""
break;
}
});
}
}
});
// This block of code is to restrict user to upload only specific FILE formats (below example is for CSV & XLSX files)
(function() {
var _old_alert = window.alert;
window.alert = function(e) {
console.log(e)
if(e.includes("csv|xlsx") || e.includes("Invalid file type")) {
$("#upload_error").html("Invalid file format. Valid formats are CSV, XLSX").removeClass('uk-hidden')
}else if(e.includes("Internal Server Error")) {
$("#upload_error").html("Internal Server Error Kindly upload Documents again").removeClass('uk-hidden')
}
else {
_old_alert.apply(window,arguments);
$("#upload_error").addClass('uk-hidden').html("")
}
};
})();
});
</script>
Pour plus d'informations sur SWAL (Sweet Alerts), visitez https://sweetalert.js.org/guides/
Votre question est trop large et basée sur une opinion. Cette question nécessite plus d'attention