Cargando capas

[tico74]

Buenas amigos, queria consultarles, ya que no me esta saliendo bien lo que hice.
Tengo una serie de capas que van cambiando a medida que clickeo en una flecha de Atras y Proximo. cuando se realiza el cambio me pedian, por si hay retraso (se hace una llamda ajax) hacer un efecto de opacidad y/o poner un cartel de "Cargando"

El tema es que aun no he podido dar en la tecla, ya que segun noto, no se si logro hacer depender el delay o carga al tiempo real que dura la llamada:

Código:

        $("#capa").animate({
                opacity: 0.01,
                left: "+=1"
             },
             {
                duration: 2000,
                start: function() {
                    
                       
                
                   
                },
                complete: function() {
                  
                   
                   
                     if (direccion=='prev')
                           {
                               pagina_perfil--;
                           }
                           else{
                               pagina_perfil++;
                           }
                           if (pagina_perfil < 0 || pagina_perfil >= 500)
                           {
                               pagina_perfil=0;
                           }

                           if (pagina_perfil >= 0)
                           {
                               $.post("<?=base_url();?>ajax/cambiocapas/"+pagina_perfil, {}, function(data){

                                           $("#capa").animate({
                                                           opacity: 1,
                                                           left: "+=100"
                                                        });
                                           $("#capa").html(data);


                               });  
                           }
                   
                   

                },
                progress: function(animation, progress) {
                  
                }
             }
          );

Me podrian guiar o dar alguna idea?
Saludos!

[tico74]

Ninguna idea, verdad?

[Alexis88]

A primera vista, la petición debe de realizarse al completarse el efecto de transición. También tienes la opción de usar el método $.ajax() que posee el método beforeSend el cual se ejecuta antes de realizar la petición. Los método .ajaxStart() y .ajaxStop() también te pueden ser útiles, así como el uso de promesas.

Saludos

[tico74]

Gracias Alexis! si, creo que en ese camino intente hacer algo pero no se donde la estoy errando:

Código Javascript:

if (pagina_perfil >= 0)
                           {
                              
                               $('#result').load('<?=base_url();?>ajax/cambiocapas/"+online_profiles_page', function() {
                                          alert('Load was performed.'); 
                                          $("#capa").animate({
                                                   opacity: 0.01,
                                                   left: "+=100"
                                          });
                                          
                               });  
                               $('#result').ajaxStop(function() {
                                          alert('Triggered ajaxStop handler.');
                                          $("#capa").animate({
                                                           opacity: 1,
                                                           left: "+=100"
                                                        });
                                          $("#capa").html(data);
                                    
                               });
  
 }
 

[Alexis88]

Asocia el método .ajaxStop() al documento, para que detecte el cese de una petición asíncrona en el documento, tal y como se muestra en los ejemplos del enlace que te dejé. Podrías usar el método .ajaxStart() para ocultar al elemento y .ajaxStop() para volver a mostrarlo y procesar la respuesta de la petición.

[tico74]

Si, estaba probando en ese sentido, lo que me confunde es si debo hacerlo dentro de la gran funcion con la que voy clickeando o fuera de ella.

[Alexis88]

La idea de usar esos métodos es la de no tener que depender de un determinado bloque de código, por eso es que son asociados al documento, para detectar la ocurrencia de la petición asíncrona y el fin de esta en el documento y no en un elemento del mismo.

Pueden ir por fuera y no habría ningún problema.

[tico74]

Gracias Alexis. Si, el problema es que son diversos bloques y diferentes llamadas y por eso aislo en cada funcion cada vez que el usuario tiene que ir para atras y para adelante.

[Alexis88]

Ya veo.

En ese caso, puedes usar otras formas, por ejemplo, mediante promesas:

Código Javascript:

/* Ejecución de una petición asíncrona cualquiera */
 
//Ocultas al elemento
$("#ejemplo").hide();
 
//Ejecutas la petición asíncrona
var x = $.post(/* ... */);
 
//Cuando la petición se complete y sea exitosa
$.when(x).then(function(respuesta){
    //Muestras al elemento y muestras la respuesta en él (o lo que desees hacer)
    $("#ejemplo").show().html(respuesta);    
});
 

Que también podrías usarla directamente con el método $.post():

Código Javascript:

$.post(/* ... */).then(/* ... */);
 

Saludos

[tico74]

Eres un genio, no solo me ayudaste a comprenderlo y solucionarlo sino que pude entender mejor el tema de las promesas , q no me quedaba claro,
te debo una amigo (o varias, mejor dicho) .
un saludo gigante!