Как динамически изменить значение индикатора выполнения JQueryUI?

Question

В моем скрипте импорта фотографий я пытаюсь обновить индикатор выполнения (Jquery UI), следуя циклу while с Ajax-запросами.

Индикатор выполнения 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

Вот мой новый код. Журнал консоли показывает прогресс в процентах, фотографии импортируются, но у меня все равно есть дисплей в конце. Если я ставлю точку останова с моим инструментом отладки где-то в цикле, дисплей обновляется, и все в порядке ...

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