Progressbar con Ajax

[aasmdaa]

Ti ho inserito un po' di commenti in più nel codice così dovrebbe essere più chiaro. Se hai altri dubbi chiedi pure:

        // Istanzia la progressbar
        $( "#progressbar" ).progressbar({
            value: 0,
            complete: function(event, ui) {
                                // Ciò che deve visualizzare una volta completata la progress bar
                $('#main_content').html('Completato');
            }
        });
        
                // Visualizza nel contenitore al di sotto della progressbar un testo (questo lo puoi anche omettere)
        $('#main_content').html('Calcolo dei record dai inserire...');
        
        // Variabili - questa la setti al di fuori delle funzioni per averla disponibile a livello globale
        global_valori = '';

        // Recupera i dati: faccio la prima chiamata alla pagina lato server che mi restituisce i record da modificare. Io ad esempio restituisco in JSON l'id univoco
        $.ajax({
            async: false,
            type: "POST",
            url: "pagina_lato_server_con_query.php",
            data: "action=total",
            dataType: "json",
            success: function(valori){
                global_valori = valori;
            },
            error: function(){
                alert("Chiamata fallita, si prega di riprovare...");
            },
            complete: function(){
            },
        });
        
        // Totale: calcolo la lunghezza del record restituito per poi troverò l'unita da aumentare per ogni step della progress bar
        var totale = global_valori.valori.length;
        
        // Unità per la progress bar
        var bar = 0;
        var unita = 100 / totale;
        
                // Anche questa la puoi omettere, serve solo per visualizzare il testo sotto la progress bar
        $('#main_content').html('Inserimento di '+totale+' records in corso...');
        
        // Ciclo: per ogni valore cicla, ovvero fa un'ulteriore chiamata, sempre in ajax, al server
        $.each(global_valori.valori, function() {
        
                       // Dato che uso la stessa funzione per diverse tabelle qui ho fatto degli if per cambiare i tipi di azione da eseguire nella pagina remota in base al pulsante premuto; qui ti riporto invece solo il caso di una singola tabella così ti è piè semplice capire il meccanismo


            // Campi da passare: passo l'azione (sei hai più azioni come spiegato sopra, altrimenti è sufficiente passare l'id_univoco)
            var campi = 'action=uno&id='+this.id;

            // Inserimento
            $.ajax({
                async: true,
                type: "POST",
                url: "pagina_lato_server.php",
                data: campi,
                dataType: "html",
                success: function(msg){
                                        // Aumenta la progressbar; ho aggiunto un controllo al 99 perchè se l'unità non è intera sforava, allora per sicurezza lo blocco a 100
                    bar += unita;
                    if(bar > 99) bar = 100;
                    barint = parseInt(bar);
                    $( "#progressbar" ).progressbar( "option", "value", barint);
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare...");
                },
                complete: function(){
                },
            });
        });
    });