如何动态更改JQueryUI progressbar的值？

Question

在我的导入照片脚本中，我尝试使用Ajax请求在while循环后更新进度条（Jquery UI）。

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; 
    }); 


    }); 

Answer 1

这是我的新代码。控制台日志显示百分比的进度，照片被导入，但我仍然在最后显示。如果我把一个断点与我的循环，所以调试工具，显示效果清新，一切都OK了...

$(function() { 

    $("#myprogressbar").show(); 

    var RetourNbPhotos = ""; 
    var RetourImported = ""; 
    var fini = false; 
    var percent_progressbar = 0; 
    var nb_photos_imported = 0; 
    var datas = desvariables; // datas sent with ajax 
    // Number of photos to import 
    function NbPhotoAjax() { 
     return $.ajax({ 
      type: 'POST', 
      async: false, 
      url: '/boutique/modules/importimageswithiptc/ajax-nbphotos.php', 
      data: 'chem=$cheminimport', 
      success: function (nbphotos) { 
       RetourNbPhotos = nbphotos; 
      } 
     }); 
    } 

    // Photo Ajax Import 
    function ImportPhotoAjax() { 

     $("#text_result").html("Import in progress : <span class='progression'>0/0</span>").show(); 

     // RetourImported = ""; 
     return $.ajax({ 
      type: 'GET', 
      async: false, 
      url: '/boutique/modules/importimageswithiptc/ajax-traitement.php', 
      data: datas, 
      success: function (resultat) { 
       RetourImported = resultat; 
      } 
     }); 
    } 

    $("#myprogressbar").progressbar({ 
     value: percent_progressbar 
    }); 

    $('#generator').submit(function() { 
     $('#generator').hide(); 
     if (jQuery.trim($("#id_product_src").val()).length != 0) { 

      $.when(NbPhotoAjax()).then(function() { 
       if (RetourNbPhotos > 0) { 
        while (nb_photos_imported < RetourNbPhotos) { 
         $.when(ImportPhotoAjax()).then(function() { 
          nb_photos_imported++; 
          if (RetourImported == "ok") { 
           percent_progressbar = Math.floor(nb_photos_imported * 100/RetourNbPhotos); 
           $("#myprogressbar").progressbar("option", "value", percent_progressbar); 
           console.info("Success : " + percent_progressbar + "%"); 
           $(".progression").html(nb_photos_imported + "/" + RetourNbPhotos); 
          } else { 
           fini = true; 
           $("#text_result").html("ajax_reussi"); 
           return false; 
          } 
         }).fail(function() { 
          // ajax error => exit the while 
          console.info("Ajax execution error " + nb_photos_imported); 
          return false; 
         }); 
        } // While 
        if (fini == 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); 
        $('#generator').show("slow"); 
       } 
      }); 
     } 
     return false; 
    }); 
});