Carga de Datos con Scroll

[mixzplit]

Hola compañeros, saludos a todos.

Tengo un problema con la carga de datos con el scroll bar, lo que estoy haciendo basicamente es que cuando el scroll bar llegue al final me carga los datos siguiente de la consulta, como un paginado mas o menos, el problema que tengo es que al llegar al final de la pagina me esta haciendo 2 $post en vez de uno y esto me haciendo que el 2 $post solape el primero y se dejan de mostrar 10 registros, coloco aqui algo de mi codigo:

Aqui mi codifo Javascript, tengo una condicion que validad unos <SELECT>

Código Javascript:

$(window).scroll(function(){
           if ($(window).scrollTop() == $(document).height() - $(window).height()){
                if($('#vendedorCuotas').val()!='null' && $('#ZonCuotas').val()!='null'){
                    
                      $('#_mensajesCarga').html('<div align="center"><img src="images/loading.gif"></div>');
                 $.post("controlador/controladorReportes.php",{op: 'fil_vendedor_mas', codven: $('#vendedorCuotas').val()},
                 function(data){
                    //alert(data);
                        if(data == ''){
                            //alert('HERE');
                          $('#_mensajesCarga').html('<div align="center">NO HAY MAS REGISTROS PARA MOSTRAR</div>');
                        }else{          
                        $('#_tabla_contenedor').append(data);
                        $('#_mensajesCarga').html('');  
                        }
 
                      })
                      
                }              
          } 
      });
 

los datos que envio por POST los estoy recibiendo asi:

Código PHP:

if($_POST['op']=='fil_vendedor_mas'){
 $cuoMas = cuotasZ($_POST['codven'],$_POST['op']);
 include('../vistas/cuotaMasVista.php');
 }
 

Y la funcion que ejecuta el SQL es esta:

Código PHP:

function cuotasZ($codigo,$opcion) {
   if (!isset($_SESSION["cantidadcargadas"])){ $_SESSION["cantidadcargadas"]=0; }   
    global $conexion;
     
    $query = "SELECT VEN_CODIGO, VEN_NOMBRE , CLI_CODIGO, CLI_NOMBRE, IFNULL(DET.ANTERI,0) AS ANTERI, IFNULL(DET.ACTUAL,0) AS ACTUAL, 
               IFNULL(ROUND((DET.ACTUAL/DET.ANTERI-1 )*100,2),0) AS PORCEN1 FROM dpvendedor 
              INNER JOIN dpclientes ON CLI_CODVEN=VEN_CODIGO 
              LEFT JOIN ( SELECT MOV_CODVEN AS CODVEN, MOV_CODCTA AS CODCTA, INV_GRUPO AS GRUPO, 
                      SUM(IF(YEAR(MOV_FECHA)=2012,MOV_TOTAL*MOV_CXUND*MOV_INVACT*IF(MOV_TIPDOC='FAV',1,-1),0)) AS ANTERI, 
                      SUM(IF(YEAR(MOV_FECHA)=2013,MOV_TOTAL*MOV_CXUND*MOV_INVACT*IF(MOV_TIPDOC='FAV',1,-1),0)) AS ACTUAL 
                      FROM dpmovinv IGNORE INDEX (DPMOVINV1) 
              LEFT JOIN dpinv IGNORE INDEX (DPINV2) ON MOV_CODIGO=INV_CODIGO 
              WHERE MOV_TIPDOC IN ('FAV','DEV','DPA') AND INV_GRUPO='000001' AND MONTH(MOV_FECHA)= 4 
              GROUP BY MOV_CODVEN, MOV_CODCTA )AS DET ON DET.CODVEN=VEN_CODIGO AND DET.CODCTA=CLI_CODIGO";
                    
   if($opcion=='fil_zona' || strlen($codigo)==3){                        
   $query.=" WHERE (VEN_ZONA = '".$codigo."')";
   }
   if($opcion=='fil_vendedor' || strlen($codigo)==6){
   $query.=" WHERE (VEN_CODIGO = '".$codigo."')";
   }  
   if($opcion=='fil_cliente'){
   $query.=" WHERE (CLI_CODIGO = '".$codigo."')";
   } 
    $query.=" GROUP BY VEN_CODIGO, CLI_CODIGO 
                 ORDER BY VEN_ZONA, VEN_CODIGO, DET.ACTUAL DESC";
    if($opcion=='fil_zona_mas' || $opcion=='fil_vendedor_mas'){                  
        $query.=" LIMIT ".$_SESSION["cantidadcargadas"].",10";
    }else {     
        $query.=" LIMIT 0,10";
    } 
    #echo $query;
    $result = $conexion->ejecutarQuery($query);
    $_SESSION["cantidadcargadas"]+=10;
    return $result;
 
}
 

De verdad no entiendo por que se estan haciendo 2 $post, esto lo evalue con FIREBUG, espero me haya explicado bien y puedan ayudarme

Saludos

[mixzplit]

Hola de nuevo, compañeros estuve probando paso a paso muy detenidamente y el problema es que al llegar el scroll al final se carga un div con una imagen de CARGANDO, esto hace que el en el scroll haya un pequeño espacio que al seguirle dando al scroll vuelve a llegar al final y carga de nuevo.

Ahora bien, como bloqueo el scroll mientras se cargan los datos?

Saludos

[anacona16]

Iniciado por mixzplit

Ahora bien, como bloqueo el scroll mientras se cargan los datos?

Saludos

Se me ocurre que uses la función $.ajax({}) y en el beforeSend cambias el scroll en ese div a hidden, una vez, en el success de $.ajax vuelves a habilitar el scroll.

[mixzplit]

Hola anacona16, fijate lo que hice, modifique toda la estructura

Agregue 2 funciones que las meto dentro de la condicion del window scroll

Código Javascript:

$(document).ready(function(){
var processing = false
       $(window).scroll(function(){
        
           if ($(window).scrollTop() == $(document).height() - $(window).height()){
             if(processing) return;      
            mas_zonas(processing);      
            mas_vendedores(processing); 
          } 
      });       
});
 

Aqui las 2 funciones que estoy usando

Código Javascript:

function mas_zonas(process){
          //alert(process);
          var zonMas = 'fil_zona_mas'
            if($('#ZonCuotas').val()!='null' && $('#vendedorCuotas').val()=='null'){
                //if(process) return;
               $.ajax({ 
                  type: "POST",
                    url: "controlador/controladorReportes.php", 
                    data: 'op=' + zonMas+'&zona='+$('#ZonCuotas').val(),
                    beforeSend: function() {
                                   //$('#_mensajesCarga').html('<div align="center"><img src="images/loading.gif"></div>'); 
                                  process = true;
                                }, 
                    success: function(data) {   
                           $('#_tabla_contenedor').append(data);
                           //$('#_mensajesCarga').html('');
                    },
                    complete: function() { process = false; }
               });                      
                }   
}
 
function mas_vendedores(process){
    var venMas = 'fil_vendedor_mas'
                if($('#vendedorCuotas').val()!='null' && $('#ZonCuotas').val()!='null'){
                    alert(process)
               if(process) return;
               $.ajax({ 
                  type: "POST",
                    url: "controlador/controladorReportes.php", 
                    data: 'op=' + venMas+'&codven='+$('#vendedorCuotas').val(),
                    beforeSend: function() {
                                   process = true; 
                                   //$('#_mensajesCarga').html('<div align="center"><img src="images/loading.gif"></div>'); 
                                  
                                }, 
                    success: function(data) {   
                           $('#_tabla_contenedor').append(data);
                               $('#_mensajesCarga').html('');
        
                    },
                    complete: function() { process = false; }
 
               });                      
 
                      
                }       
    
}
 

Como vera cambie todo a $AJAX, me esta funcionado bien, pero no es por que lo pase a AJAX y manejo mejor los eventos. Resulta que la el <DIV> donde me esta mostrando la imagen de carga cuando el scroll llega al final, me esta cambiando el tamaño de a pagina y si el usuario sigue bajando, se hacen 2 consultas, la segunda se ejecuta antes de que termine la primera y por eso se pierden los datos de la primera consulta y solo muestra el resultado de la segunda.
Le quite el DIV donde carga la imagen y funciona perfecto.

Esto se puede solucionar? quisiera colocar la imagen de carga por si la conexion es lenta

Saludos

[anacona16]

Como te digo, en el evento beforeSend puedes poner una imagen con posición fixed o algo asi, y luego en el evento success la quitas.

[mixzplit]

tienes razon, disculpa, gracias por la ayuda