Progressbar con Ajax

[aasmdaa]

Ho una progress bar che vorrei fare aumentare in base alla risposta di un file che effettua una serie di query di inserimento.

    <div id="progressbar"></div> 

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

    $('#btn_avvia').click(function() {
        
        // Variabili
        campi = '';
        
        // Recupera i dati
        $.ajax({
            async: true,
            type: "POST",
            url: "pdo.php",
            data: campi,
            dataType: "html",
            success: function(msg){
                $( "#progressbar" ).progressbar( "option", "value", msg );
            },
            error: function(){
                alert("Chiamata fallita, si prega di riprovare...");
            },
            complete: function(){
            },
        });
    }); 

// Scorre l'array
while($row = $STH_Practor->fetch()) {
    
    echo $progress;

    $progress++;

} 

In pratica restituisco il numero $progress che equivale a quello del progresso in percentuale e pensavo che con la chiamata asincrona venisse aggiornato, invece mi restituisce l'intero insieme di numeri senza modificare la progressbar.

[cavicchiandrea]

Ma... non sono esperto ne di PHP ne del plug-in/metodo progressbar di jquery, ma credo che sia il php che deve restituirti il dato in percentuale non il tipo di chiamata sincrona/asincrona che dovrebbe essere ininfluente

[aasmdaa]

Sì infatti lo script lato server effettua il loop per fare gli insert e contemporaneamente resituisce tramite ajax il numero progressivo. Mi aspetto che lato client venga aggiornato il val della progressbar, invece al termine dello script lato server viene restituito il valore completo.

Probabilmente il loop lo devo fare lato client e fare x chiamate allo script lato server...

[aasmdaa]

Per chiarire ogni dubbio:

per ottenere una progress bar funzionante è necessario effettuare tante chiamate al server quanti sono i cicli da effettuare. Pertanto la soluzione logica che ho adottato è questa:

1) con Ajax faccio una chiamata al server che mi restituisce in Json l'array dei codici da ciclare
2) con un ciclo lato client effettua tante chiamate al server quanti sono i dati restituiti dall'array della prima chiamata
3) per ogni ciclo aumento la progressbar

Testato e funzionante

ciao

[emanuele0208]

Originariamente inviato da aasmdaa
Per chiarire ogni dubbio:

per ottenere una progress bar funzionante è necessario effettuare tante chiamate al server quanti sono i cicli da effettuare. Pertanto la soluzione logica che ho adottato è questa:

1) con Ajax faccio una chiamata al server che mi restituisce in Json l'array dei codici da ciclare
2) con un ciclo lato client effettua tante chiamate al server quanti sono i dati restituiti dall'array della prima chiamata
3) per ogni ciclo aumento la progressbar

Testato e funzionante

ciao

Non è che potresti mettere un esempio?
Sto sbattendo la testa da 2 giorni proprio sulla stessa identica cosa.
Grazie

[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(){
                },
            });
        });
    }); 

[emanuele0208]

Ho provato ma nn va, sicuramente sbaglio qualcosa nei 2 php.
Se riuscissi a postare anche un esempio di php cn query e php dove visualizzi la barra sarebbe fantastico.
Grazie mille

[aasmdaa]

Per la pagina di visualizzazione le cose sono semplicissime:

- devi caricare jquery e jquery ui (infatti nel codice utilizzo le chiamate ajax tramite jquery)
- devi mettere i 2 tag con id main_content e progressbar

Per quanto riguarda il lato server la query dipende da quello che devi fare, l'importante è restituire i dati in json (io utilizzo json_encode); ad esempio alla prima chiamata:

// Seleziono i dati che devo modificare/inserire...
SELECT id FROM tabella WHERE ...
...
// ...e li restituisco in formato json
json_encode(...); 

E nella seconda (quella che cicli lato client) effettui l'update/modifica/inserimento

UPDATE tabella WHERE id = {$_POST['id']}... 

[emanuele0208]

Il problema è sicuramente nell'encode json da parte del php con query:
nel mio caso si tratta di restituire mail, ma poco importa ho messo un alias "id" piuttosto che mail
mi restituisce dei valori ordinati in questa maniera:

[{"0":"provaaaa@gmail.com","id":"provaaaa@gmail.com"},"0":"emanuele0208@gmail.com","id":"emanuele0208@gmail.com"},"0":"prova2@gmail.com","id":"prova2@gmail.com"}] 

e lo script di conseguenza non li accetta

nel tuo codice precedente c'è un errore nell'ultima riga, ovvero

}); 

di troppo, era anche per quello che non funzionava inizilamente.

[aasmdaa]

L'errore c'è ma è dovuto al fatto che ti ho copiato solo una parte del mio codice e non tutto ovviamente, quindi a monte ci sono altre cose.

Comunque sei ad un buon punto, devi solo aggiustare il tiro. Ti posso postare come creo io l'array lato server, ma non credo ti possa aiutare molto:

    // Lettura
    $STH = $DBH->query($query);
    
    // Ciclo
    while($row = $STH->fetch()) {
        
        // Creazione array
        $data["valori"][] = array("codice_articolo" => $row['CODICE_ARTICOLO']);
    }
    
    // Risposta
    echo json_encode($data); 

Ma questo è solo un modo, devi ovviamente adattare ciò che restituisce il lato server a quello che devi usare lato client.