Ich habe eine Dropdown-Box. Wenn der Benutzer einen Wert aus der Dropdown-Liste auswählt, führt er eine Abfrage aus, um die Daten aus der Datenbank abzurufen, und zeigt die Ergebnisse im Frontend mit ajax an. Es dauert etwas Zeit, daher möchte ich in dieser Zeit einen Fortschrittsbalken anzeigen. Ich habe gesucht und habe zahlreiche Tutorials zum Erstellen von Fortschrittsbalken für Uploads gefunden, aber ich habe keine gemocht. Kann mir jemand eine hilfreiche Anleitung geben?
Mein Ajax-Code:
<script>
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
}
});
});
});
</script>
Dieses link beschreibt, wie Sie einen Fortschrittsereignis-Listener zur xhr-Objekt-Jquery hinzufügen.
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
// Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
// Do something success-ish
}
});
<script>
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
//show the loading div here
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
//hide the loading div here
}
});
});
});
</script>
Oder Sie können das auch tun:
$(document).ajaxStart(function() {
// show loader on start
$("#loader").css("display","block");
}).ajaxSuccess(function() {
// hide loader on success
$("#loader").css("display","none");
});
Grundsätzlich müssen Sie ein Ladebild haben. Laden Sie hier ein kostenloses Bild herunter http://www.ajaxload.info/
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
$('#loadingmessage').show();
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$('#loadingmessage').hide();
$("#result").html(data);
}
});
});
});
Auf HTML-Körper
<div id='loadingmessage' style='display:none'>
<img src='img/ajax-loader.gif'/>
</div>
Wahrscheinlich könnte dir das helfen
Hier ist ein Beispiel, das für mich mit MVC und Javascript im Razor arbeitet. Die erste Funktion ruft eine Aktion über ajax auf meinem Controller auf und übergibt zwei Parameter.
function redirectToAction(var1, var2)
{
try{
var url = '../actionnameinsamecontroller/' + routeId;
$.ajax({
type: "GET",
url: url,
data: { param1: var1, param2: var2 },
dataType: 'html',
success: function(){
},
error: function(xhr, ajaxOptions, thrownError){
alert(error);
}
});
}
catch(err)
{
alert(err.message);
}
}
Verwenden Sie ajaxStart, um Ihren Fortschrittsbarcode zu starten.
$(document).ajaxStart(function(){
try
{
// showing a modal
$("#progressDialog").modal();
var i = 0;
var timeout = 750;
(function progressbar()
{
i++;
if(i < 1000)
{
// some code to make the progress bar move in a loop with a timeout to
// control the speed of the bar
iterateProgressBar();
setTimeout(progressbar, timeout);
}
}
)();
}
catch(err)
{
alert(err.message);
}
});
Wenn der Vorgang abgeschlossen ist, schließen Sie die Fortschrittsleiste
$(document).ajaxStop(function(){
// hide the progress bar
$("#progressDialog").modal('hide');
});
$(document).ready(function () {
$(document).ajaxStart(function () {
$('#wait').show();
});
$(document).ajaxStop(function () {
$('#wait').hide();
});
$(document).ajaxError(function () {
$('#wait').hide();
});
});
<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
<img src="../images/loading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" />
</div>
Nach langem Suchen nach einer Möglichkeit, einen Fortschrittsbalken anzuzeigen, nur um das eleganteste Aufladen zu ermöglichen, konnte kein Weg gefunden werden, der meinem Zweck dient. Überprüfen Sie, ob der aktuelle Status der Anforderung demaziado komplex und manchmal nicht wirklich funktionierte Schnipsel auf eine sehr einfache Weise erstellt wurde, aber es gibt mir die Erfahrung (oder fast), nach dem Code zu suchen:
$.ajax({
type : 'GET',
url : url,
dataType: 'html',
timeout: 10000,
beforeSend: function(){
$('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>');
$('.progress-bar').animate({width: "30%"}, 100);
},
success: function(data){
if(data == 'Unauthorized.'){
location.href = 'logout';
}else{
$('.progress-bar').animate({width: "100%"}, 100);
setTimeout(function(){
$('.progress-bar').css({width: "100%"});
setTimeout(function(){
$('.my-box').html(data);
}, 100);
}, 500);
}
},
error: function(request, status, err) {
alert((status == "timeout") ? "Timeout" : "error: " + request + status + err);
}
});
Ich habe es so gemacht
CSS
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('/Images/loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
JS
$(document).ready(function () {
$(document).ajaxStart(function () {
$("html").addClass("loading");
});
$(document).ajaxStop(function () {
$("html").removeClass("loading");
});
$(document).ajaxError(function () {
$("html").removeClass("loading");
});
});
Ich weiß, dass bereits viele Antworten für diese Lösung geschrieben wurden. Ich möchte jedoch eine andere Javascript-Methode (abhängig von JQuery) zeigen, in der Sie NUR eine einzige JS-Datei ohne Abhängigkeit von CSS oder Gif-Images einfügen müssen Code und dies kümmert sich um alle Animationen der Fortschrittsleiste, die während der Ajax-Anforderung auftreten. Sie müssen die Javascript-Funktion einfach so übergeben
var objGlobalEvent = new RegisterGlobalEvents(true, "");
Hier ist die Arbeitsgeige für den Code. https://jsfiddle.net/vibs2006/c7wukc41/3/
versuchen Sie dies, es kann Ihnen helfen
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
beforeSend: function( ) {
// load your loading fiel here
}
})
.done(function( data ) {
//hide your loading file here
});