Condicion para que salga imagen Loading

satjaen · #1 (**permalink**) 10/10/2012, 06:05

Hola, por favor quisiera saber como puedo hacer una condicion para que saliera la imagen animada de loading......

Tengo esta condicion que cuando no hay registros sale:

Código Javascript:

Ver originalif(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';

Cuando hay registros:

Código PHP:

Ver original$("#data tbody").html(html_user);

Entonces lo que quiero es que antes de encontrar los registros me salga la imagen animada de loading......

Pongo todo el cod.

Código Javascript:

Ver originalfunction filtrar()
{   
                $.ajax({
                    // Antes de realizar la llamada mostramos el ajax load
                    beforeSend: function(){
                        $('#data').html('<img id="loader" src="imagenes_menu/ajax-loader.gif"/>');
                    },
        data: $("#frm_filtro").serialize()+ordenar,
        type: "POST",
        dataType: "json",
        url: "ajax.php?action=listar",
            success: function(data){ 
    var html_user ='' ;
    if(data.length > 0){ 
        $.each(data, function(i,item){ 
        
        
         
 html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
 html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
 html_user += '<td id="row0" >'+item.num_usuario+'</td>';
 html_user += '<td>'+item.telefono+'</td>';
 html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
 html_user += '<td>'+item.poblacion+'</td>';
 html_user += '</tr>';
            
                                  
        });                     
    } 
    if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
}
 
            
      });
}

Gracias.

cuasatar · #2 (**permalink**) 10/10/2012, 06:38

Bueno, el tema no es de PHP sino de javascript. Aunque no domino el tema de ajax para jquery lo que debes hacer es cargar la imagen en el estado 1 de la carga. De pronto este enlace te haga mas claridad. En ajax para javascript si lo tengo muy claro pero seguro viendo este enlace mas otros que mires por tu cuenta ya quedara claro.

http://stackoverflow.com/questions/3...request-status

DoHITB · #3 (**permalink**) 10/10/2012, 06:41

Buenas!

Supongo que usas jquery... yo de jquery no lo llevo muy al día, pero con javascript se puede hacer lo mismo.

Tienes que verificar el estado de la petición. Te dejo un código estándar en JS:

Código:

function createREQ(){
    try{
        req=new XMLHttpRequest();
    }catch(err1){
        try{
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (err2){
            try{
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }catch (err3){
               req=false;
            }
        }
    }

    return req;
}

function requestGET(url, query, req){
    myRand=parseInt(Math.random()*99999999);
    req.open("GET",url+'?'+query+'&rand='+myRand, true);req.send(null);
}

function requestPOST(url, query, req){
    req.open("POST", url, true);
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');req.send(query);
}

function doAjax(url, query, reqtype, getxml, divToChange, vals){
    var myreq=createREQ();
    myreq.onreadystatechange=function(){
                                                      if(myreq.readyState==4){
                                                          if(myreq.status==200){
                                                              var item=myreq.responseText;

                                                              if(getxml==1){
                                                                  item=myreq.responseXML;
                                                              }

                                                               print(item, divToChange);
                                                           }
                                                       }else{
                                                           printWait(vals);
                                                       }
                                                   }

    if(reqtype=='post'){
        requestPOST(url, query, myreq);
    }else{
        requestGET(url, query, myreq);
    }
}

La función "print" escribe los valores finales, mientras que "printWait" se muestra mientras carga. Es ahí donde tendrás que poner la imágen de carga.

Por cierto, para que tu tema quede zanjado más rápido y con mayor calidad, postea en el subforo adecuado...

Saludos!

cuasatar · #4 (**permalink**) 10/10/2012, 06:50

Concuerdo con DoHITB que es mejor que postee el tema en el foro adecuado. Vi muy rapidamente tu código (no lo he analizado la verdad) pero me parece que te complicas un poco. Lo único que se debe hacer para cargar una imagen de carga es poner es verificar si readyState=1. En este estado se le puede imprimir un mensaje de carga y hasta si se desea un gif animado. No tengo el código así a la mano pero no es muy dificil.

Aqui dejo el resumen de los estados que pasa la petición ajax y lo que significa cada uno para que quede mas claro.

readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

satjaen · #5 (**permalink**) 10/10/2012, 08:05

Muchisimas gracias, por contestar porque en Frameworks y Plugins Javascript no me contestan, y no se si es porque no me entienden lo que quiero hacer o no se......
El caso es que no se como integrar el cod

Código Javascript:

Ver originalfunction CargarDatos(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina , true);
 
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
 
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = "<img src='ajax-loader.gif' align='center' /><br /> Aguarde por favor...";
}
 
 
if (ajax.readyState == 4){
 if(ajax.status == 200) {
document.getElementById(capa).innerHTML =
ajax.responseText;
}
}}
ajax.send(null);
}

En este otro:

Código Javascript:

Ver originalfunction filtrar()
{   
                $.ajax({
        data: $("#frm_filtro").serialize()+ordenar,
        type: "POST",
        dataType: "json",
        url: "ajax.php?action=listar",
            success: function(data){ 
    var html_user ='' ;
    if(data.length > 0){ 
        $.each(data, function(i,item){ 
        
        
         
 html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
 html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
 html_user += '<td id="row0" >'+item.num_usuario+'</td>';
 html_user += '<td>'+item.telefono+'</td>';
 html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
 html_user += '<td>'+item.poblacion+'</td>';
 html_user += '</tr>';
            
                                  
        });                     
    } 
    if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
}
 
            
      });
}

Gracias

DoHITB · #6 (**permalink**) 10/10/2012, 08:36

Cita:

Iniciado por cuasatar

Concuerdo con DoHITB que es mejor que postee el tema en el foro adecuado. Vi muy rapidamente tu código (no lo he analizado la verdad) pero me parece que te complicas un poco. Lo único que se debe hacer para cargar una imagen de carga es poner es verificar si readyState=1. En este estado se le puede imprimir un mensaje de carga y hasta si se desea un gif animado. No tengo el código así a la mano pero no es muy dificil.

Aqui dejo el resumen de los estados que pasa la petición ajax y lo que significa cada uno para que quede mas claro.

readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

@satjaen: como te he comentado no entiendo mucho de jquery, pero veo que para lanzar AJAX puedes usar algunas opciones... no se si será así, pero cuando escribes

Código:

success: function(data){ ...

Tengo la sensación que esa función saltará con el estado "4". Así, deberías mirar si hay alguna manera de verificar cuando el estado está en "2" y ahí hacer la función que muestre el GIF (o lo que sea necesario).

Como te digo, es solo una deducción... jejeje

Otra solución es usar AJAX con javascript; es un poco más largo pero igualmente válido... y con JavaScript sí que tienes una manera segura de comprobar el estado.

@cuasatar: el script que he dejado es largo, lo se... si te soy sincero este código venía dentro de una librería de funciones que venía en un cd de un libro de PHP JS y AJAX... jejeje. Desde luego yo lo uso para AJAX y me funciona a las mil maravillas; eso sí, le hice un par de modificaciones al original, pero yo lo veo bastante completo.

Saludos!

satjaen · #7 (**permalink**) 10/10/2012, 08:53

Se te refires a que debe de ser una cosa así no?

Código Javascript:

Ver originalsuccess: function(data){ 
        if (ajax.readyState==2){
        document.getElementById(data).innerHTML = "<img src='ajax-loader.gif' align='center' /><br /> Aguarde por favor...";
        }

Pero no funciona.
De verdad muchas gracias.

DoHITB · #8 (**permalink**) 10/10/2012, 08:59

Una cosa... puede parecer una verdadera estupidez, pero (y esto lo leí en el libro que comentaba antes, jejeje) si la petición AJAX va muy rápido no dará tiempo a que cargue la imagen...

No se si será tu caso porque no se cuánto te tarda la petición en completarse. Yo muchas veces no veo el resultado del estado "2" cuando uso AJAX en mi web...

Si es que tarda muy poco, para asegurarte que funciona pon un alert, así se te aseguras. Si no es que tarda muy poco... ya no sé... puedes probar de mirar la consola de JavaScript (generalmente aprentando F12) a ver si eso te da alguna pista.

Saludos!

cuasatar · #9 (**permalink**) 10/10/2012, 09:05

satjaen Leiste lo que te lei bien? Yo recomende que se debe usar el ready state==1. ya que como deje indicado es cuando se inicializa la conexión. el 2 y el 3 nunca los he usado a nivel practico y no se si tienen algún uso practico o no porque cuando pasa del 1 al 4 es tan rapido que no alcanza a procesarlo (Alguna vez hice pruebas con el 2 y 3 por mera curiosidad académica).

Te deberia servir tu función con el 1. Eso si desconozco como se maneja el ready status con jquery pero en si la sintaxis la "veo" bien (y digo la veo bien sin saber si así se maneja en jquery).

Ya estas cerca de resolver el problema.

h2swider · #10 (**permalink**) 10/10/2012, 09:10

con jquery podrias usar

Código Javascript:

Ver originalbeforeSend: function(){
    mostrarImagen();
},
success: function(respuesta){
    ocultarImagen();
}

DoHITB · #11 (**permalink**) 10/10/2012, 09:10

Cita:

Iniciado por cuasatar

satjaen Leiste lo que te lei bien? Yo recomende que se debe usar el ready state==1

vaya... y yo pesado con el status "2"... para que veas cuantísimo se de AJAX...

Lo siento...

cuasatar · #12 (**permalink**) 10/10/2012, 09:18

Lo que te dice h2swider te deberia funcionar. Igual no sobra que leas un poco mas de la documentación de ajax en la página oficial en jquery. Al yo no conocer la sintaxis en jquery (que es un poco diferente a como se hace en javascript) no puedo brindar mas ayuda.

satjaen · #13 (**permalink**) 10/10/2012, 09:21

Gracias a todos, he puesto esta function CargarDatos delante pero no se si da tiempo a salir la imagen, es como si no hiciera nada?
El id de la capa donde salen los registros es data y no se si lo estoy haciendo bien.
Le podeis echar un vistazo por favor?

Código Javascript:

Ver originalfunction CargarDatos(data) {
var
ajax;
ajax = ajaxFunction();
ajax.open("POST", true);
 
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
 
if (ajax.readyState==1){
document.getElementById(data).innerHTML = "<img src='menu_imagenes/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...";
}
 
 
if (ajax.readyState == 4){
 if(ajax.status == 200) {
document.getElementById(data).innerHTML =
ajax.responseText;
}
}}
ajax.send(null);
}
function filtrar()
{   
        $.ajax({
        data: $("#frm_filtro").serialize()+ordenar,
        type: "POST",
        dataType: "json",
        url: "ajax.php?action=listar",
        success: function(data){ 
        var html_user ='' ;
        if(data.length > 0){ 
        $.each(data, function(i,item){ 
        
        
         
 html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
 html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
 html_user += '<td id="row0" >'+item.num_usuario+'</td>';
 html_user += '<td>'+item.telefono+'</td>';
 html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
 html_user += '<td>'+item.poblacion+'</td>';
 html_user += '</tr>';
            
                                  
        });                     
    } 
    if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
}
 
            
      });
}

Gracias.

h2swider · #14 (**permalink**) 10/10/2012, 09:32

satjaen, te recomiendo que no uses ajax nativamente si ya estas usando jquery que te facilita mucho las cosas, en vez de estar consultando por estados de la respuesta, podes usar perfectamente los callbacks de ajax en jquery.

Jquery ajax callbacks
Here are the callback hooks provided by $.ajax():

beforeSend callback is invoked; it receives the jqXHR object and the settings map as parameters.
error callbacks are invoked, in the order they are registered, if the request fails. They receive the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".
dataFilter callback is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success.
success callbacks are then invoked, in the order they are registered, if the request succeeds. They receive the returned data, a string containing the success code, and the jqXHR object.
complete callbacks fire, in the order they are registered, when the request finishes, whether in failure or success. They receive the jqXHR object, as well as a string containing the success or error code.