Imagen animada al llamar al servidor

satjaen · #1 (**permalink**) 07/10/2012, 10:15

Hola, necesito programar este cod para que funcione solo cuando haga las llamadas al servidor, porque asi como esta la imagen animada me aparece siempre. Se puede hacer?

Código Javascript:

Ver original<script>
 var ld=(document.all);
  var ns4=document.layers;
 var ns6=document.getElementById&&!document.all;
 var ie4=document.all;
  if (ns4)
    ld=document.loading;
 else if (ns6)
    ld=document.getElementById("loading").style;
 else if (ie4)
    ld=document.all.loading.style;
  function init()
 {
 if(ns4){ld.visibility="hidden";}
 else if (ns6||ie4) ld.display="none";
 }
 </script>
</head>
<body onLoad="init()">
<div id="loading"><img src="imagenes_menu/ajax-loader1.gif" border=0 /></span></div>

Sirikon · #2 (**permalink**) 07/10/2012, 11:29

Escribí una respuesta y me di cuenta luego de que no estaba bien ^^"

mis disculpas xD

satjaen · #3 (**permalink**) 08/10/2012, 02:40

Como puedo incluir la funcion loader:

Código Javascript:

Ver original$(document).ready(function(){
  $("div").ajaxStart(function(){
    $(this).html("<img src='demo_wait.gif' />");
  });
  $("button").click(function(){
    $("div").load("demo_ajax_load.asp");
  });
});

En mi cod, donde tengo un formulario con un boton donde filtro los datos:

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);
}
 
            
      });
}

satjaen · #4 (**permalink**) 08/10/2012, 11:37

He puesto esto pero no me funciona.
Hay alguien que me pueda ayudar?

Código Javascript:

Ver original$('button').click(function(){
        $('#data').ajaxStart(function() {   
        $('this').append("<img src='imagenes_menu/ajax-loader3.gif' />");
        });
        $('#data').ajaxComplete(function() {
        $('this').append('Se competo la carga');       
        });
        $.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){

satjaen · #5 (**permalink**) 10/10/2012, 01:26

Explico un poco lo que quiero hacer:
Tengo un formulario con varios campos y un boton para hacer una busqueda por nº de telefono, localidad etc.., el cual tiene un boton y debajo de este formulario tengo un tabla que por medio de ajax recupero los resultados de la consulta php a la base de datos.

Este es parte del formulario:

Código HTML:

Ver original<div id="formulario">
    <form id="frm_filtro" method="post" action="" name="form1">
            <table width="685">
  <tr>
    <td width="9%" class="campo_apellidos2">Teléfonos</td>
    <td width="9%"><input name="telefono" type="text" size="9" /></td>
</tr>
     <tr>
    <td class="campo_apellidos2">Localidad</td>
    <td colspan="4"><input name="poblacion" type="text" size="30" />
      </tr>
 
 <th scope="col"><button type="button"  id="btnfiltrar" name="btnfiltrar" style="border:0; margin:0; padding:0;cursor:pointer">
  <img src="imagenes_menu/boton_buscar.png"/>
</button>
</th>
  </tr>
</table>                
          </form>

Aquí en esta la tabla donde recupero los resultados:

Código HTML:

Ver original<table width="100%" id="data" class="table-dg-grid" >
             <thead>
              <tr>
       <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
                     <th><span title="selecc">Selecc.</span></th>
                    <th><span title="nu_usuario">Nº Usuario</span></th>
                    <th><span title="telefono">Teléfono</span></th>
                    <th><span title="nombre">Nombre</span></th>
                    <th><span title="poblacion">Población</span></th>  
                     </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

y me falta el archivo js que es donde quiero que al darle al boton de busqueda me haga la tipica imagen animada de busqueda Loading............

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);
}
 
            
      });
}

Por favor, si no me he explicado con claridad decirmelo.Gracias

satjaen · #6 (**permalink**) 10/10/2012, 08:34

Como puede ser que en php me esten contestando y aquí no me contesteis

?

Dradi7 · #7 (**permalink**) 10/10/2012, 09:46

Mira primero no vengas a decir acá que porque no te ayudamos, en el foro de php hay mucho mas gente que los demás foros pero eso no quiere decir que no te apoyan, ademas hay cosas que son solamente sencillas de explicar y ya varios te han ayudado y han dado la idea en varios temas que has puesto, uno con la idea ya debería hacerlo todo.

Código Javascript:

Ver originalfunction filtrar()
{
    // ANTES DE LLAMAR EL AJAX HAZ AQUI TU LOADING EJEMPLO, DONDE CARGA ES TU ELEMENTO DEL DOM A MOSTRAR UN TEXTO O IMAGEN
    $('.carga').html('CARGANDO....');
    $.ajax({
        data: $("#frm_filtro").serialize()+ordenar,
        type: "POST",
        dataType: "json",
        url: "ajax.php?action=listar",
        success: function(data){ 
            // ACA PUEDES MOSTRAR UN TEXTO DICIENDO QUE YA CARGO LA DATA
            // ESTO LO PUEDES PONER UNA VEZ HAYA CARGADO EL AJAX O CUANDO HAYAS LISTADO TODOS LOS ELEMENTOS
            $('.carga').html('CARGO COMPLETAMENTE');
        },
        error: function(){
            // ACA PUEDES MOSTRAR UN TEXTO DICIENDO EL ERROR QUE YA CARGO TU DATA
            $('.carga').html('ERROR AL CARGAR COMPLETAMENTE');
        }
    });
}

El ejemplo que te puse esta todo bien explicado, y no creo que te tome mucho entenderlo

Saludos

satjaen · #8 (**permalink**) 10/10/2012, 16:40

LLevas razon os pido disculpas pero llevo tres dias esperando y ya no sabía donde acudir.
Bueno....he puesto lo que me has indicado:
- Cuando se cargan es muy rapida la recuperación de datos y no se aprecia la imagen animada, puede ser que tenga que hacer algo en el ajax.php?
- Cuando me pones $('.carga'), no debería de ir en lugar de carga el nombre del id de la capa donde yo quiero que salga la imagen animada(id=data)?
- Yo solo quiero que salga la imagen cuando haga la llamada al servidor.
-Me quedo así:

Código Javascript:

Ver originalfunction filtrar()
 
{
 
// ANTES DE LLAMAR EL AJAX HAZ AQUI TU LOADING EJEMPLO, DONDE CARGA ES TU ELEMENTO DEL DOM A MOSTRAR UN TEXTO O IMAGEN
 
$('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
$.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);
    }
 
            
      });
}

Nota: Lo sencillo tambien se enseña, lo complicado es saber enseñar no crees

?
Muchas gracias por vuestra paciencia.

Dradi7 · #9 (**permalink**) 10/10/2012, 16:47

Es que como tu dices tu ajax carga rápido porque cuenta con un internet alto pero en los usuarios que tenga un internet lento entonces ellos van a poder ver la imagen, no te compliques sino se ve esto ya depende de cada usuario mismo, pero si en todo caso deseas mostrar la imagen entonces en tu PHP debes agregar esto la funcion sleep el cual te permite retrasar la ejecución de tu script cierta cantidad de segundos

sleep(2000)

Esto lo pones al final de tu archivo PHP que estas llamando con el AJAX con esto te va a mostrar la imagen de todas formas

Saludos

satjaen · #10 (**permalink**) 10/10/2012, 17:17

Dradi7, lo he puesto al final pero no me recoge datos.

Código PHP:

  // convertimos el array de datos a formato json
    
    echo json_encode($datos);
    sleep(2000);
}
?>

Despues lo he puesto al principio y así si retrasa los datos pero no sale el loading:

sleep(5);

- En php me han dicho que puedo utilizar esto, pero no se donde ponerlo:

Código Javascript:

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

Gracias.

quike88 · #11 (**permalink**) 11/10/2012, 10:22

Hola,

Dale una revisada a $.ajax() y tambíen a Ajax Events, tienen ejemplos bastante claros.

El código sería algo así:

Código Javascript:

Ver original$.ajax({
        data: $("#frm_filtro").serialize()+ordenar,
        type: "POST",
        dataType: "json",
        url: "ajax.php?action=listar",
        beforeSend: function(){
            //MUESTRAS LA IMAGEN
        },
        success: function(data){ 
            // OCULTAS LA IMAGEN
            // ACA PUEDES MOSTRAR UN TEXTO DICIENDO QUE YA CARGO LA DATA
            // ESTO LO PUEDES PONER UNA VEZ HAYA CARGADO EL AJAX O CUANDO HAYAS LISTADO TODOS LOS ELEMENTOS
            $('.carga').html('CARGO COMPLETAMENTE');
        },
        error: function(){
            // ACA PUEDES MOSTRAR UN TEXTO DICIENDO EL ERROR QUE YA CARGO TU DATA
            $('.carga').html('ERROR AL CARGAR COMPLETAMENTE');
        }
    });

Un saludo!

Dradi7 · #12 (**permalink**) 11/10/2012, 10:31

Poniendo el sleep al comienzo te deberia salir la imagen la pregunta ahora va a lo siguiente cual es el emento que tienes para poder mostrar la imagen yo te puse $('.carga') tienes un elemento que tenga como clase carga???

Saludos

satjaen · #13 (**permalink**) 11/10/2012, 11:25

No lo tengo, creo que lo dices porque debo de crear un div llamado carga dentro del div donde recojo los datos una cosa asi no?
<div id="carga"></div>

Código Javascript:

Ver original<table width="100%" id="data" class="table-dg-grid" >
             <thead>
              <tr>
       <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
                     <div id="carga"></div>
                     <th><span title="selecc">Selecc.</span></th>
                    <th><span title="nu_usuario">Nº Usuario</span></th>
                    <th><span title="telefono">Teléfono</span></th>
                    <th><span title="nombre">Nombre</span></th>
                    <th><span title="poblacion">Población</span></th>
                     </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

Dradi7 · #14 (**permalink**) 11/10/2012, 11:28

Eso es entonces jejeje

Ahora acuerdate que un elemento que se encuentra en un table debe estar en su respectiva fila y columna no como lo estas haciendo tu

Código HTML:

Ver original<thead>
<tr>
<th> <div id="carga"></div></th>
</tr>
</thead>

Si en todo caso deseas mostrar el div en toda la tabla esto ya es cuestion de CSS

Saludos

satjaen · #15 (**permalink**) 11/10/2012, 11:57

He puesto esto:

Código Javascript:

Ver originalfunction filtrar()
 
{
 
       $.ajax({
 data: $("#frm_filtro").serialize()+ordenar,
 type: "POST",
 dataType: "json",
 url: "ajax.php?action=listar",
 beforeSend: function(){
$('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
 },
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);
     // OCULTAS LA IMAGEN
 // ACA PUEDES MOSTRAR UN TEXTO DICIENDO QUE YA CARGO LA DATA
 // ESTO LO PUEDES PONER UNA VEZ HAYA CARGADO EL AJAX O CUANDO HAYAS LISTADO TODOS LOS ELEMENTOS
 $('.carga').html('CARGO COMPLETAMENTE');
 },
error: function(){
 // ACA PUEDES MOSTRAR UN TEXTO DICIENDO EL ERROR QUE YA CARGO TU DATA
  $('.carga').html('ERROR AL CARGAR COMPLETAMENTE');
}
 });
    }

Código HTML:

Ver original<table width="100%" id="data" class="table-dg-grid" >
             <thead>
              <tr>
          <th><div id="carga"></div></th>
          <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
          <th><span title="selecc">Selecc.</span></th>
          <th><span title="nu_usuario">Nº Usuario</span></th>
          <th><span title="telefono">Teléfono</span></th>
          <th><span title="nombre">Nombre</span></th>
          <th><span title="poblacion">Población</span></th>
             </tr>
            </thead>
                <tbody>
                </tbody>
            </table>

Pero sigue sin sacarme la imagen animada

Dradi7 · #16 (**permalink**) 11/10/2012, 12:02

Pero mira bien tu código estas poniendo

<div id="carga">

y en jQuery los ID se manejan con #

yo he puesto

$('.carga')

que hace referencia a una clase o lo cambias por #carga o en tu div agregas class="carga" esto ya depende de ti

Saludos

satjaen · #17 (**permalink**) 11/10/2012, 12:27

Si, pero lo que pasa que si le pongo la class="carga" la imagen empieza a salir nada mas ver el formulario y no cuando le das al boton de busqueda.
A lo mejor hay que poner tambien una funcion para que salga la imagen cuando se le de a dicho boton de busqueda no?
Y otra cosa no puede ser que el <th><div id="carga" class="carga"></div></th>, tenga que ir en la parte de:

Código Javascript:

Ver original} 
    if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
    $("#data tbody").html(html_user);
    $('.carga').html('');
}

Porque aquí es donde me salen los registros que recojo y es donde debería de salir la imagen animada antes de nada?

Lo he dejado así:

Código Javascript:

Ver originalfunction filtrar()
 
{
 
     $.ajax({
 data: $("#frm_filtro").serialize()+ordenar,
 type: "POST",
 dataType: "json",
 url: "ajax.php?action=listar",
 beforeSend: function(){
 $('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
 },
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);
    $('.carga').html('');
}
 
            
      });
}

Código Javascript:

Ver original<table width="100%" id="data" class="table-dg-grid" >
             <thead>
              <tr>
          <th><div id="carga" class="carga"></div></th>
          <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
          <th><span title="selecc">Selecc.</span></th>
          <th><span title="nu_usuario">Nº Usuario</span></th>
          <th><span title="telefono">Teléfono</span></th>
          <th><span title="nombre">Nombre</span></th>
          <th><span title="poblacion">Población</span></th>
             </tr>
            </thead>
                <tbody>
                </tbody>
            </table>

Dradi7 · #18 (**permalink**) 11/10/2012, 13:26

Es que lo que te falta es cuestión de CSS

Si ves bien lo único que se te hizo es poder mostrar la imagen, por lo tanto tu div debe estar oculto

<div id="carga" style="display:none"></div>

y en tu procedimiento donde haces el ajax

en la parte donde tu has puesto esto

Código Javascript:

Ver originalbeforeSend: function(){
$('#carga').css('display','block');
 $('#carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
 }

satjaen · #19 (**permalink**) 11/10/2012, 14:52

Muy bien Dradi7, muchas gracias estoy aprendiendo mucho contigo, ves como es mas satisfactorio enseñar que aprender

.
Solo una cosa es que la imagen sigue saliendo nada mas que abrir el formulario sin darle al boton de busqueda como ya te comente antes, una vez que ya haces la primera busqueda ya va saliendo y ocultandose segun vayas haciendo las busquedas.
Podemos solucionar lo de el principio?
Gracias

Dradi7 · #20 (**permalink**) 11/10/2012, 15:04

No estoy seguro en donde vas a poner el carga en tu funcion filtrar o pulsar

satjaen · #21 (**permalink**) 11/10/2012, 15:18

Algo así:

Código Javascript:

Ver original$(function(){
$('button').click(function(){

o así:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("div").ajaxStart(function(){
    $(this).html("<img src='demo_wait.gif' />");
  });
  $("button").click(function(){
    $("div").load("demo_ajax_load.asp");
  });
});
</script>
</head>
<body>
 
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
 
</body>
</html>

satjaen · #22 (**permalink**) 14/10/2012, 04:54

Solucionado.

Código Javascript:

Ver original// ocultar div loading antes de llamar a funcion filtrar
    $(".carga").hide();
    // filtrar al darle click al boton
    $("#btnfiltrar").click(function(){ filtrar() });

Gracias.