Foros del Web » Programando para Internet » Jquery »

Oscurecer ventana y mostrar un loading mientras hace la búsqueda

Estas en el tema de Oscurecer ventana y mostrar un loading mientras hace la búsqueda en el foro de Jquery en Foros del Web. Buenas noches, he visto en algunas páginas que cuando hacen las búsquedas aparce un loading, como puedo hacer para que cuando busque un registro en ...
  #1 (permalink)  
Antiguo 06/07/2015, 20:00
 
Fecha de Ingreso: septiembre-2011
Mensajes: 233
Antigüedad: 12 años, 6 meses
Puntos: 1
Oscurecer ventana y mostrar un loading mientras hace la búsqueda

Buenas noches, he visto en algunas páginas que cuando hacen las búsquedas aparce un loading, como puedo hacer para que cuando busque un registro en el proceso de buscar se oscurezca el fondo y salga un loading?, tengo pensado utilizar ajax en la parte de beforeSend pero si me pudieran dar una idea se lo agradecería.
  #2 (permalink)  
Antiguo 07/07/2015, 03:32
 
Fecha de Ingreso: febrero-2013
Mensajes: 115
Antigüedad: 11 años, 1 mes
Puntos: 5
Respuesta: Oscurecer ventana y mostrar un loading mientras hace la búsqueda

Hola buenos dias, te dare un ejemplo del codigo JQUERY:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3.     //digamos que el id del formulario de busqueda se llama buscar entonces:
  4.     $("#buscar").submit(function(e){
  5.         //evitamos que se envie el formulario
  6.         e.preventDefault();
  7.  
  8.         //mostramos el loader
  9.         $("#loader").html("<img src='loader.gif'/>");
  10.  
  11.         //usamos el metodo $.ajax, $.get, $.post dependiendo el que te guste, yo lo hare con post
  12.         $.post("buscar.php", {busqueda:palabra},function(data){
  13.                 //buscar.php: es la pagina donde esta la consulta y la que mostrara los resultados de la busqueda
  14.                 //busqueda : es como llamaras en php a la variable post $_POST['busqueda']
  15.                 //palabra: es lo que buscas, lo que introduces en el campo de busqueda
  16.                 //data: es la respuesta, lo que arrojo el archivo buscar.php
  17.             //mostramos los resultados
  18.             $("#resultados").html(data);
  19.             //quitamos el loader
  20.             $("#loader").html("");
  21.         });
  22.  
  23.     });
  24.  
  25. });

Espero haberte podido ayudar... Saludos
__________________
http://tutorialesdelweb.blogspot.com/TutorialesWeb(principiantes)
  #3 (permalink)  
Antiguo 07/07/2015, 13:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Oscurecer ventana y mostrar un loading mientras hace la búsqueda

Usar el método beforeSend está bien. Otra forma que puedes usar es mediante los métodos .ajaxStart() y .ajaxStop().

Código Javascript:
Ver original
  1. $(document).ajaxStart(function(){
  2.     /* Oscureces el fondo y muestras el GIF de "Buscando..." */
  3. }).ajaxStop(function(){
  4.     /* Clarificas el fondo y ocultas el GIF de "Buscando..." */
  5. });

Para mostrar/ocultar el GIF, tienes varios métodos, como .show() y .hide(), .fadeIn() y .fadeOut(), .toggle(), entre otros.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: loading, mientras, oscurecer, ventana
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 17:03.