Jquery :: Barra de progreso accionada Ajax?

Question

Tengo una página que utiliza funciones ajax de jquery para enviar algunos mensajes.

Puede haber más de 50k mensajes para enviar.

Esto puede llevar algo de tiempo, obviamente.

Lo que estoy buscando hacer es mostrar una barra de progreso con los mensajes que se envían.

El backend es PHP.

¿Cómo puedo hacer esto?

---

Mi solución: Enviar por un identificador único en la llamada original de AJAX.
Este identificador se almacena en una base de datos (o un archivo llamado con el identificador, etc.), junto con el porcentaje de finalización.

Esto se actualiza a medida que avanza el script original.

es una función de configuración de llamada progress(ident)

La función realiza una llamada AJAX a un script que lee el porcentaje.
la barra de progreso se actualiza Si el porcentaje devuelto no es 100,
la función establece un tiempo de espera que se llama después de 1 segundo.

Answer 1

Puede tener una carga de gif animado a través del .html() en el área de resultados hasta que la función ajax devuelva los resultados. Solo una idea.

En cuanto a la barra de progreso de jquery ui, de forma intermitente a través de su secuencia de comandos, querrá repetir un valor numérico que representa el porcentaje completado como una variable de javascript asignada. Por ejemplo ...

// text example php script 
if (isset($_GET['twentyfive-percent'])) { 
    sleep(2); // I used sleep() to simulate processing 
    echo '$("#progressbar").progressbar({ value: 25 });'; 
    } 
if (isset($_GET['fifty-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 50 });'; 
    } 
if (isset($_GET['seventyfive-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 75 });'; 
    } 
if (isset($_GET['onehundred-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 100 });'; 
    } 

Y debajo está la función que utilicé para que la barra de progreso actualice su posición. Un poco loco, lo sé.

avail_elem = 0; 
function progress_bar() { 
    progress_status = $('#progressbar').progressbar('value'); 
    progress_status_avail = ['twentyfive-percent', 'fifty-percent', 'seventyfive-percent', 'onehundred-percent']; 
    if (progress_status != '100') { 
     $.ajax({ 
      url: 'test.php?' + progress_status_avail[avail_elem], 
      success: function(msg) { 
       eval(msg); 
       avail_elem++; 
       progress_bar(); 
       } 
      }); 
     } 
    } 

Si tuviera que adivinar, apuesto a que hay una manera mejor ... Pero esta es la forma en que trabajó para mí cuando lo probé.

Answer 2

Comprobar si utiliza jQuery: http://docs.jquery.com/UI/Progressbar

Usted puede simplemente proporcionar el valor de la barra sobre los éxitos AJAX.

De lo contrario, si no se utiliza Marco JS ver esto: http://www.redips.net/javascript/ajax-progress-bar/

que no tienen una forma de probarlo, pero debe ir como esto:

var current = 0; 
    var total = 0; 
    var total_emails = <?php $total_emails ;?>; 

    $.ajax({ 

     ... 
     success: function(data) { 
     current++; // Add one to the current number of processed emails 
     total = (current/total_emails)*100; // Get the percent of the processed emails 
     $("#progressbar").progressbar("value", total); // Add the new value to the progress bar 
     } 
    }); 

Y hacer asegúrese de incluir jQuery junto con jQueryUI y luego agregar el contenedor #progressbar en algún lugar de la página.

Quizás tenga algunos errores ... Probablemente tendrá que redondear el total, especialmente si tiene muchos correos electrónicos.

Answer 3

Use this answered question

esto es cómo i implementé:

var progressTrigger; 
    var progressElem = $('span#progressCounter'); 
    var resultsElem = $('span#results'); 
    var recordCount = 0; 

    $.ajax({ 
     type: "POST", 
     url: "Granules.asmx/Search", 
     data: "{wtk: '" + wkt + "', insideOnly: '" + properties.insideOnly + "', satellites: '" + satIds + "', startDate: '" + strDateFrom + "', endDate: '" + strDateTo + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "xml", 
     success: function (xml) { 
      Map.LoadKML(xml); 
     }, 
     beforeSend: function (thisXHR) { 
      progressElem.html(" Waiting for response from server ..."); 
      ResultsWindow.LoadingStart(); 

      progressTrigger = setInterval(function() { 
       if (thisXHR.readyState > 2) { 
        var totalBytes = thisXHR.getResponseHeader('Content-length'); 
        var dlBytes = thisXHR.responseText.length; 
        (totalBytes > 0) ? progressElem.html("Downloading: " + Math.round((dlBytes/totalBytes) * 100) + "%") : "Downloading: " + progressElem.html(Math.round(dlBytes/1024) + "K"); 
       } 
      }, 200); 


     }, 
     complete: function() { 
      clearInterval(progressTrigger); 
      progressElem.html(""); 
      resultsElem.html(recordCount); 
      ResultsWindow.LoadingEnd(); 
     }, 
     failure: function (msg) { 
      var message = new ControlPanel.Message("<p>There was an error on search.</p><p>" + msg + "</p>", ControlPanel.Message.Type.ERROR); 
     } 
    });