Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Imagen animada al llamar al servidor

Estas en el tema de Imagen animada al llamar al servidor en el foro de Frameworks JS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 07/10/2012, 10:15
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Imagen animada al llamar al servidor

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
  1. <script>
  2.  var ld=(document.all);
  3.   var ns4=document.layers;
  4.  var ns6=document.getElementById&&!document.all;
  5.  var ie4=document.all;
  6.   if (ns4)
  7.     ld=document.loading;
  8.  else if (ns6)
  9.     ld=document.getElementById("loading").style;
  10.  else if (ie4)
  11.     ld=document.all.loading.style;
  12.   function init()
  13.  {
  14.  if(ns4){ld.visibility="hidden";}
  15.  else if (ns6||ie4) ld.display="none";
  16.  }
  17.  </script>
  18. </head>
  19. <body onLoad="init()">
  20. <div id="loading"><img src="imagenes_menu/ajax-loader1.gif" border=0 /></span></div>
  #2 (permalink)  
Antiguo 07/10/2012, 11:29
Avatar de Sirikon  
Fecha de Ingreso: marzo-2009
Mensajes: 82
Antigüedad: 15 años
Puntos: 11
Respuesta: Imagen animada al llamar al servidor

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

mis disculpas xD
__________________
Carlos a.k.a. Sirikon - Escorbuto Team
  #3 (permalink)  
Antiguo 08/10/2012, 02:40
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

Como puedo incluir la funcion loader:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.   $("div").ajaxStart(function(){
  3.     $(this).html("<img src='demo_wait.gif' />");
  4.   });
  5.   $("button").click(function(){
  6.     $("div").load("demo_ajax_load.asp");
  7.   });
  8. });

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

Código Javascript:
Ver original
  1. function filtrar()
  2. {  
  3.  
  4.  
  5.         $.ajax({
  6.         data: $("#frm_filtro").serialize()+ordenar,
  7.         type: "POST",
  8.         dataType: "json",
  9.         url: "ajax.php?action=listar",
  10.         success: function(data){
  11.         var html_user ='' ;
  12.         if(data.length > 0){
  13.         $.each(data, function(i,item){
  14.        
  15.        
  16.          
  17.  html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
  18.  html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
  19.  html_user += '<td id="row0" >'+item.num_usuario+'</td>';
  20.  html_user += '<td>'+item.telefono+'</td>';
  21.  html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
  22.  html_user += '<td>'+item.poblacion+'</td>';
  23.  html_user += '</tr>';
  24.            
  25.                                  
  26.         });                    
  27.     }
  28.     if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
  29.     $("#data tbody").html(html_user);
  30. }
  31.  
  32.            
  33.       });
  34. }
  #4 (permalink)  
Antiguo 08/10/2012, 11:37
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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

Código Javascript:
Ver original
  1. $('button').click(function(){
  2.         $('#data').ajaxStart(function() {  
  3.         $('this').append("<img src='imagenes_menu/ajax-loader3.gif' />");
  4.         });
  5.         $('#data').ajaxComplete(function() {
  6.         $('this').append('Se competo la carga');       
  7.         });
  8.         $.ajax({
  9.         data: $("#frm_filtro").serialize()+ordenar,
  10.         type: "POST",
  11.         dataType: "json",
  12.         url: "ajax.php?action=listar",
  13.         success: function(data){
  14.         var html_user ='' ;
  15.         if(data.length > 0){
  16.         $.each(data, function(i,item){
  #5 (permalink)  
Antiguo 10/10/2012, 01:26
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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
  1. <div id="formulario">
  2.     <form id="frm_filtro" method="post" action="" name="form1">
  3.             <table width="685">
  4.   <tr>
  5.     <td width="9%" class="campo_apellidos2">Teléfonos</td>
  6.     <td width="9%"><input name="telefono" type="text" size="9" /></td>
  7. </tr>
  8.      <tr>
  9.     <td class="campo_apellidos2">Localidad</td>
  10.     <td colspan="4"><input name="poblacion" type="text" size="30" />
  11.       </tr>
  12.  
  13.  <th scope="col"><button type="button"  id="btnfiltrar" name="btnfiltrar" style="border:0; margin:0; padding:0;cursor:pointer">
  14.   <img src="imagenes_menu/boton_buscar.png"/>
  15. </th>
  16.   </tr>
  17. </table>                
  18.           </form>

Aquí en esta la tabla donde recupero los resultados:

Código HTML:
Ver original
  1. <table width="100%" id="data" class="table-dg-grid" >
  2.              <thead>
  3.               <tr>
  4.        <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
  5.                      <th><span title="selecc">Selecc.</span></th>
  6.                     <th><span title="nu_usuario">Nº Usuario</span></th>
  7.                     <th><span title="telefono">Teléfono</span></th>
  8.                     <th><span title="nombre">Nombre</span></th>
  9.                     <th><span title="poblacion">Población</span></th>  
  10.                      </tr>
  11.                 </thead>
  12.                 <tbody>
  13.                 </tbody>
  14.             </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 original
  1. function filtrar()
  2. {  
  3.        
  4.         $.ajax({
  5.         data: $("#frm_filtro").serialize()+ordenar,
  6.         type: "POST",
  7.         dataType: "json",
  8.         url: "ajax.php?action=listar",
  9.         success: function(data){
  10.         var html_user ='' ;
  11.         if(data.length > 0){
  12.         $.each(data, function(i,item){
  13.        
  14.        
  15.          
  16.  html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
  17.  html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
  18.  html_user += '<td id="row0" >'+item.num_usuario+'</td>';
  19.  html_user += '<td>'+item.telefono+'</td>';
  20.  html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
  21.  html_user += '<td>'+item.poblacion+'</td>';
  22.  html_user += '</tr>';
  23.            
  24.                                  
  25.         });                    
  26.     }
  27.     if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
  28.     $("#data tbody").html(html_user);
  29. }
  30.  
  31.            
  32.       });
  33. }


Por favor, si no me he explicado con claridad decirmelo.Gracias
  #6 (permalink)  
Antiguo 10/10/2012, 08:34
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

Como puede ser que en php me esten contestando y aquí no me contesteis?
  #7 (permalink)  
Antiguo 10/10/2012, 09:46
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

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 original
  1. function filtrar()
  2. {
  3.     // ANTES DE LLAMAR EL AJAX HAZ AQUI TU LOADING EJEMPLO, DONDE CARGA ES TU ELEMENTO DEL DOM A MOSTRAR UN TEXTO O IMAGEN
  4.     $('.carga').html('CARGANDO....');
  5.     $.ajax({
  6.         data: $("#frm_filtro").serialize()+ordenar,
  7.         type: "POST",
  8.         dataType: "json",
  9.         url: "ajax.php?action=listar",
  10.         success: function(data){
  11.             // ACA PUEDES MOSTRAR UN TEXTO DICIENDO QUE YA CARGO LA DATA
  12.             // ESTO LO PUEDES PONER UNA VEZ HAYA CARGADO EL AJAX O CUANDO HAYAS LISTADO TODOS LOS ELEMENTOS
  13.             $('.carga').html('CARGO COMPLETAMENTE');
  14.         },
  15.         error: function(){
  16.             // ACA PUEDES MOSTRAR UN TEXTO DICIENDO EL ERROR QUE YA CARGO TU DATA
  17.             $('.carga').html('ERROR AL CARGAR COMPLETAMENTE');
  18.         }
  19.     });
  20. }

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

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #8 (permalink)  
Antiguo 10/10/2012, 16:40
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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 original
  1. function filtrar()
  2.  
  3. {
  4.  
  5. // ANTES DE LLAMAR EL AJAX HAZ AQUI TU LOADING EJEMPLO, DONDE CARGA ES TU ELEMENTO DEL DOM A MOSTRAR UN TEXTO O IMAGEN
  6.  
  7. $('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
  8. $.ajax({
  9. data: $("#frm_filtro").serialize()+ordenar,
  10. type: "POST",
  11. dataType: "json",
  12. url: "ajax.php?action=listar",
  13. success: function(data){
  14. var html_user ='' ;
  15. if(data.length > 0){
  16. $.each(data, function(i,item){
  17.        
  18.        
  19.          
  20.  html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
  21.  html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
  22.  html_user += '<td id="row0" >'+item.num_usuario+'</td>';
  23.  html_user += '<td>'+item.telefono+'</td>';
  24.  html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
  25.  html_user += '<td>'+item.poblacion+'</td>';
  26.  html_user += '</tr>';
  27.            
  28.                                  
  29.         });                    
  30.     }
  31.     if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
  32.     $("#data tbody").html(html_user);
  33.     }
  34.  
  35.            
  36.       });
  37. }

Nota: Lo sencillo tambien se enseña, lo complicado es saber enseñar no crees?
Muchas gracias por vuestra paciencia.
  #9 (permalink)  
Antiguo 10/10/2012, 16:47
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

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
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #10 (permalink)  
Antiguo 10/10/2012, 17:17
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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 original
  1. beforeSend: function(){
  2. * * mostrarImagen();
  3. },
  4. success: function(respuesta){
  5. * * ocultarImagen();
  6. }


Gracias.

Última edición por satjaen; 11/10/2012 a las 01:31
  #11 (permalink)  
Antiguo 11/10/2012, 10:22
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 8 meses
Puntos: 87
Respuesta: Imagen animada al llamar al servidor

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
  1. $.ajax({
  2.         data: $("#frm_filtro").serialize()+ordenar,
  3.         type: "POST",
  4.         dataType: "json",
  5.         url: "ajax.php?action=listar",
  6.         beforeSend: function(){
  7.             //MUESTRAS LA IMAGEN
  8.         },
  9.         success: function(data){
  10.             // OCULTAS LA IMAGEN
  11.             // ACA PUEDES MOSTRAR UN TEXTO DICIENDO QUE YA CARGO LA DATA
  12.             // ESTO LO PUEDES PONER UNA VEZ HAYA CARGADO EL AJAX O CUANDO HAYAS LISTADO TODOS LOS ELEMENTOS
  13.             $('.carga').html('CARGO COMPLETAMENTE');
  14.         },
  15.         error: function(){
  16.             // ACA PUEDES MOSTRAR UN TEXTO DICIENDO EL ERROR QUE YA CARGO TU DATA
  17.             $('.carga').html('ERROR AL CARGAR COMPLETAMENTE');
  18.         }
  19.     });

Un saludo!
  #12 (permalink)  
Antiguo 11/10/2012, 10:31
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

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
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #13 (permalink)  
Antiguo 11/10/2012, 11:25
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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
  1. <table width="100%" id="data" class="table-dg-grid" >
  2.              <thead>
  3.               <tr>
  4.        <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
  5.                      <div id="carga"></div>
  6.                      <th><span title="selecc">Selecc.</span></th>
  7.                     <th><span title="nu_usuario">Nº Usuario</span></th>
  8.                     <th><span title="telefono">Teléfono</span></th>
  9.                     <th><span title="nombre">Nombre</span></th>
  10.                     <th><span title="poblacion">Población</span></th>
  11.                      </tr>
  12.                 </thead>
  13.                 <tbody>
  14.                 </tbody>
  15.             </table>
  #14 (permalink)  
Antiguo 11/10/2012, 11:28
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

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
  1. <tr>
  2. <th> <div id="carga"></div></th>
  3. </tr>

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

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #15 (permalink)  
Antiguo 11/10/2012, 11:57
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

He puesto esto:

Código Javascript:
Ver original
  1. function filtrar()
  2.  
  3. {
  4.  
  5.        $.ajax({
  6.  data: $("#frm_filtro").serialize()+ordenar,
  7.  type: "POST",
  8.  dataType: "json",
  9.  url: "ajax.php?action=listar",
  10.  beforeSend: function(){
  11. $('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
  12.  },
  13. success: function(data){
  14.         var html_user ='' ;
  15.         if(data.length > 0){
  16.         $.each(data, function(i,item){
  17.        
  18.        
  19.          
  20.  html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
  21.  html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
  22.  html_user += '<td id="row0" >'+item.num_usuario+'</td>';
  23.  html_user += '<td>'+item.telefono+'</td>';
  24.  html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
  25.  html_user += '<td>'+item.poblacion+'</td>';
  26.  html_user += '</tr>';
  27.            
  28.                                  
  29.         });                    
  30.     }
  31.     if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
  32.     $("#data tbody").html(html_user);
  33.      // OCULTAS LA IMAGEN
  34.  // ACA PUEDES MOSTRAR UN TEXTO DICIENDO QUE YA CARGO LA DATA
  35.  // ESTO LO PUEDES PONER UNA VEZ HAYA CARGADO EL AJAX O CUANDO HAYAS LISTADO TODOS LOS ELEMENTOS
  36.  $('.carga').html('CARGO COMPLETAMENTE');
  37.  },
  38. error: function(){
  39.  // ACA PUEDES MOSTRAR UN TEXTO DICIENDO EL ERROR QUE YA CARGO TU DATA
  40.   $('.carga').html('ERROR AL CARGAR COMPLETAMENTE');
  41. }
  42.  });
  43.     }


Código HTML:
Ver original
  1. <table width="100%" id="data" class="table-dg-grid" >
  2.              <thead>
  3.               <tr>
  4.           <th><div id="carga"></div></th>
  5.           <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
  6.           <th><span title="selecc">Selecc.</span></th>
  7.           <th><span title="nu_usuario">Nº Usuario</span></th>
  8.           <th><span title="telefono">Teléfono</span></th>
  9.           <th><span title="nombre">Nombre</span></th>
  10.           <th><span title="poblacion">Población</span></th>
  11.              </tr>
  12.             </thead>
  13.                 <tbody>
  14.                 </tbody>
  15.             </table>


Pero sigue sin sacarme la imagen animada
  #16 (permalink)  
Antiguo 11/10/2012, 12:02
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

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
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #17 (permalink)  
Antiguo 11/10/2012, 12:27
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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
  1. }
  2.     if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
  3.     $("#data tbody").html(html_user);
  4.     $('.carga').html('');
  5. }
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 original
  1. function filtrar()
  2.  
  3. {
  4.  
  5.      $.ajax({
  6.  data: $("#frm_filtro").serialize()+ordenar,
  7.  type: "POST",
  8.  dataType: "json",
  9.  url: "ajax.php?action=listar",
  10.  beforeSend: function(){
  11.  $('.carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
  12.  },
  13. success: function(data){
  14.         var html_user ='' ;
  15.         if(data.length > 0){
  16.         $.each(data, function(i,item){
  17.        
  18.        
  19.          
  20.  html_user += '<tr ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.num_usuario + String.fromCharCode(39)  + ');" >';
  21.  html_user += '<td ><input name="demo" type="radio" value="' + item.num_usuario + '"/></td>';
  22.  html_user += '<td id="row0" >'+item.num_usuario+'</td>';
  23.  html_user += '<td>'+item.telefono+'</td>';
  24.  html_user += '<td>'+item.nombre+' '+item.apellidos+'</td>';
  25.  html_user += '<td>'+item.poblacion+'</td>';
  26.  html_user += '</tr>';
  27.            
  28.                                  
  29.         });                    
  30.     }
  31.     if(html_user == '') html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
  32.     $("#data tbody").html(html_user);
  33.     $('.carga').html('');
  34. }
  35.  
  36.            
  37.       });
  38. }



Código Javascript:
Ver original
  1. <table width="100%" id="data" class="table-dg-grid" >
  2.              <thead>
  3.               <tr>
  4.           <th><div id="carga" class="carga"></div></th>
  5.           <tr bgcolor=#DFEBFF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
  6.           <th><span title="selecc">Selecc.</span></th>
  7.           <th><span title="nu_usuario">Nº Usuario</span></th>
  8.           <th><span title="telefono">Teléfono</span></th>
  9.           <th><span title="nombre">Nombre</span></th>
  10.           <th><span title="poblacion">Población</span></th>
  11.              </tr>
  12.             </thead>
  13.                 <tbody>
  14.                 </tbody>
  15.             </table>
  #18 (permalink)  
Antiguo 11/10/2012, 13:26
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

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 original
  1. beforeSend: function(){
  2. $('#carga').css('display','block');
  3.  $('#carga').html("<img src='imagenes_menu/ajax-loader3.gif' align='center' /><br /> Aguarde por favor...");
  4.  }
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #19 (permalink)  
Antiguo 11/10/2012, 14:52
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

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
  #20 (permalink)  
Antiguo 11/10/2012, 15:04
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Imagen animada al llamar al servidor

No estoy seguro en donde vas a poner el carga en tu funcion filtrar o pulsar
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #21 (permalink)  
Antiguo 11/10/2012, 15:18
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

Algo así:

Código Javascript:
Ver original
  1. $(function(){
  2. $('button').click(function(){



o así:

Código Javascript:
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="jquery.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("div").ajaxStart(function(){
  8.     $(this).html("<img src='demo_wait.gif' />");
  9.   });
  10.   $("button").click(function(){
  11.     $("div").load("demo_ajax_load.asp");
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17.  
  18. <div><h2>Let AJAX change this text</h2></div>
  19. <button>Change Content</button>
  20.  
  21. </body>
  22. </html>


Última edición por satjaen; 11/10/2012 a las 15:27
  #22 (permalink)  
Antiguo 14/10/2012, 04:54
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 7 meses
Puntos: 10
Respuesta: Imagen animada al llamar al servidor

Solucionado.

Código Javascript:
Ver original
  1. // ocultar div loading antes de llamar a funcion filtrar
  2.     $(".carga").hide();
  3.     // filtrar al darle click al boton
  4.     $("#btnfiltrar").click(function(){ filtrar() });

Gracias.

Etiquetas: ajax, animada, funcion, servidor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:58.