0

tengo un problema y requiero su ayuda. resulta que tengo un listado de registros que filtro a traves de select y fechas para luego ese listado se procese a tra ves de un boton mediante su evento onclick. pasandole los datos por ajax a otra pagina que se encargara de hacer el proceso, este proceso dura al rededor de 5 minutos en adelante ya que son mas 5 mil registros con los que se realiza diferentes tareas y actualiza en diferentes tablas a traves de consultas sql en ciclos foreach. el punto es que necesito mostrarle al usuario en una barra de progreso el avance del mismo para que sepa su avance.

$('#procesar').click(function(){
    var zona = $('#zona').val();
    var rutas = $('#rutas').val();
    var gestion = $('#gestion').val();
    var nmes = $('#nmes').val();
    var nombre = $('#nombb').val();
    if(zona != '' || nombre !='' || rutas !='')    
      {
       $.ajax({
           url:"../formularios/masivos_proceso.php",
           type:"POST",       
           data: {zona:zona, rutas:rutas, nombre:nombre, gestion:gestion, nmes:nmes},
           success: function(resp){
                //$("#tabla_masivos").html(resp);
           }
        });       
      }
      else
      {
        Swal.fire({
          type: 'error',
          title: 'Datos Incorrectos',
          text: 'Faltan Datos, verfique e intente de Nuevo'         
        }); 
      }    
});

como veran mando los datos desde masivos.php (aqui esta mi listado) a masivos_proceso.php para que este se encargue de procesar todo a traves de ajax. una ves en estando en masivos_proceso.php se me ocurrio insertar la barra de progreso en medio de los ciclos anidados que tengo para procesar datos. algo asi:

$sql = "SELECT * FROM fefac WHERE ANIO = $gestion AND NMES = $nmes ";
$cuantos = $sai->prepare($sql);
$cuantos->execute();

$total_registro = $cuantos->rowCount();
$progreso =0;
//INICIAMOS TRANSACCION
$conexion->beginTransaction();
set_time_limit(8000000);
try
{   
    foreach ($cuantos as $row):  
      //.......... aqui viene bastante codigo 
       foreach ($detalle as $deta): 
            //.. aqui tb bastante codigo
       endforeach;
     //    y segun mi logica inserte aqui la barra de progreso
    $progreso++;
        echo '<div class="progress">
          <div class="progress-bar" role="progressbar" style="width:"'.$progreso.'%;" aria-valuenow="'.$progreso.'" aria-valuemin="0" aria-valuemax="'.$total_registro.'">'.$progreso.'%</div>
        </div>';
    endforeach;
}
catch (PDOException $e){      
    echo 'PDOException: ' . $e->getMessage();
    $conexion->rollBack();    
}.

//pero no me muestra ninguna barra obviamente por que esta mal, pero si verifico a traves con f12 en en el navegador si me muestra las respuesta de la barra de progreso avanzando.. pero quisiera tener una barra de progreso en la pagina principal masivos.php. espero me ayuden

1 respuesta 1

1

Yo hice eso hace tiempo el truco esta usar setInterval de javascript para que vaya contando cuanto va del proceso. Si no puedes saber desde el principio el total a procesar, no se va a poder. Lo siento, solo encontre el javascript pero no el php y lo movi un poco para no publicar mis rutas, pero creo que te puede dar una idea:

$.ajax({
    url: ruta,//proceso que calcula cuantas faltan y obtengo un total
    type: "GET",
    data: datos,//dependiendo de los datos pasados sabes si es la 1ra vez o un vez posterior
    dataType: "json",
    async: false,
}).done(function (respuesta, textStatus, jqXHR){
    total=respuesta.total;
}).fail(function (jqXHR, textStatus, errorThrown){
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);
    console.log("error\njqXHR=" + jqXHR + "\nstatus=" + textStatus + "\nerror=" + errorThrown);
}).always(function (dataORjqXHR, textStatus, jqXHR_ORerrorThrown) {
    //alert( "complete" );
});
if(total>0){
    var parcial=0;
    idInterval=setInterval(function(){// setinterval se ejecuta periodicamente hasta que la detengo con clearinterval y va contando cuantas faltan
        $.ajax({
            url: ruta,//proceso que calcula cuantas faltan y obtengo un resultado parcial, es la mismar url que el 1er ajax
            data: datos,//dependiendo de los datos pasados sabes si es la 1ra vez o un vez posterior
            type: "POST",
            dataType: "json",
            async: false,
        }).done(function (respuesta, textStatus, jqXHR){//actualizo y calculo los porcentajes en la(s) barra(s) de progreso
            parcial=respuesta.totalParcial;
            var por=parseInt(parcial/total*100);
            barraprogreso.value=por;
            barraprogreso.innerHTML=por+"% de "+totalArevalidar; 
            barraprogreso2.innerHTML=por+"% : "+parcialArevalidar+" de "+totalArevalidar;
        }).fail(function (jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
            console.log("error\njqXHR=" + jqXHR + "\nstatus=" + textStatus + "\nerror=" + errorThrown);
        }).always(function (dataORjqXHR, textStatus, jqXHR_ORerrorThrown) {
            //alert( "complete" );
        });
    }, 1000*10);//1000*60*5  ->5 min
    $.ajax({
        url: ruta,//aqui ejecuto el procesote, es una url diferente
        data: datos,
        type: "POST",
        dataType: "json",
        async: true,
        }).done(function (respuesta, textStatus, jqXHR){//actualizo a 100% porque aqui termina el procesote
            clearInterval(idInterval);//cuando el procesote termina, detengo el setinterval
            barraprogreso.value=100;
            barraprogreso.innerHTML="100%";
            $("#progreso2").html("100%");
            mostrar();
            console.log(datos.resultado);
            btnRevalidar.disabled=false;
            barraprogreso.style.display="none";
            barraprogreso2.style.display="none";
        }).fail(function (jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
            console.log("error\njqXHR=" + jqXHR + "\nstatus=" + textStatus + "\nerror=" + errorThrown);
        }).always(function (dataORjqXHR, textStatus, jqXHR_ORerrorThrown) {
            //alert( "complete" );
        });
    });
}else{//el total calculado fue 0 porque no se hace nada pero se actualiza la barra a 100%
    progreso.value=100;
    progreso.innerHTML="100%";
    progreso2.innerHTML="100%";
    alert("La consulta no devolvio registros.\nSi buscaste por fechas comprueba que tambien se haya ingresado la hora, si no es po");
    btnRevalidar.disabled=false;
    progreso.style.display="none";
    progreso2.style.display="none";
}
2
  • haber no se si estoy mal olvide mencionar qque soy principiante pero bueno, entiendeo que desde mi pagina 1 envio parametros a traves de ajax a mi pagina 2 donde se procesa toda la informacion y solo retorna cuando termina de procesar toda la informacion, retorna con una mensaje de terminado o un error para mostrar en mi pagina 1, no logro asimiliar como mostrar una barra de progreso en mi pagina 1 tendria que volver en cada vuelta a mi ciclo foreach al ajax para indicarle valores y poder cargar mi progressbar, o estoy equivocado. igual sigo leyendo en cuanto sepa como publico la respuesta. Commented el 13 nov. 2022 a las 21:14
  • Los botones que recargan la pagina completa ya no se usan desde que surgio ajax, son una mala practica de programación: <button> ya no se utiliza, debes usar <input type='button'>
    – abrahamhs
    Commented el 14 nov. 2022 a las 16:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.