在我的導入照片腳本中,我嘗試使用Ajax請求在while循環後更新進度條(Jquery UI)。如何動態更改JQueryUI progressbar的值?
JQueryUI進度條,應該在啓動ajax請求之前顯示,它會在之後執行。所以我有我的while循環執行結束時的用戶反饋...(控制檯顯示這些應用程序運行良好,按照正確的順序)
我想過使用live()或bind( ),但我不知道如何測試它...
這裏是我的jQuery代碼:
$(function() {
var percent_progressbar=0;
$('#myform').submit(function() {
$('#myform').hide();
$("#text_result").html("Import in progress : <span class='progression'>0/0</span>").show(10, function() {
$("#myprogressbar").progressbar({value:percent_progressbar});
$("#myprogressbar").show(10, function() {
if (jQuery.trim($("#id_src").val()).length!=0) {
// Total number of photos to import
$.ajax({
type : 'POST',
async : false,
url : '/nbphotos.php',
data : 'chem=mydir',
success : function(nbphotos){
if (nbphotos>0){
$(".progression").html("0"+"/"+nbphotos);
var finish=false;
var nb_photos_imported=0;
var ajax_done = false;
var resultat_ajax="";
// Variables envoyées en Ajax
var datas = desvariables;
while (nb_photos_imported < nbphotos) {
ajax_done = false;
$.ajax({
type : 'GET',
async : false,
url : '/traitement.php',
data : datas,
success : function(resultat){
resultat_ajax=resultat;
ajax_done=true;
nb_photos_imported++;
}
});
if (ajax_done==true){
if (resultat_ajax=="ok") {
percent_progressbar = Math.floor(nb_photos_imported*100/nbphotos);
$("#myprogressbar").progressbar("option", "value", percent_progressbar);
console.info("Succès ajax (resultat : OK) : "+percent_progressbar);
$(".progression").html(nb_photos_imported+"/"+nbphotos);
} else {
finish=true;
$("#text_result").html(ajax_done);
return false;
}
} else {
// ajax error => exit the while
console.info("Ajax execution error "+nb_photos_imported);
return false;
}
} // While
if (finish==true) {
$("#myprogressbar").hide('slow');
$('#text_result').html("Import of "+nb_photos_imported+" photos done.");
}
} else{
$("#text_result").html("No photo to import.");
$("#myprogressbar").hide(10);
$('#myform').show("slow");
}
}
});
}
});
}); // callback #text_result.show()
return false;
});
});
不要有時間一個完整的答案大氣壓,對不起。 /因此,在所有簡短的幾個觀察中:您在成功回調中設置了'ajax_done = true;'和'nb_photos_imported ++;',但在定義ajax請求之後立即檢查它。結果不準確,因爲大多數(所有)請求在運行最後一次檢查之前不會完成。我建議查看jQuery的延遲對象API:http://api.jquery.com/category/deferred-object/。也許這可以給你一個關於如何更好地解決這個問題的想法。發佈如果你正在進行修改,我會盡力在稍後寫一個答案。 – polarblau 2012-01-11 20:27:33