Como muestro un gif de carga, automaticamente se presiona BOTON ENVIAR?

SI TAN SOLO TUVIERA · #1 (**permalink**) 11/07/2007, 17:19

Hola que tal!!

Ando trabajando en un pryecto que es un buscador de autos, y quisiera saber como hacer para:

1. Hacer que salga un grafiquito chiquito de LOADING, o el tipico circulito girando a un ladito del boton SEARCH cuando este se presione, y luego bote la pagina con los resultados ya cargados (algo asi como cuando le das guardar aqui en el foro)

o

2. tambien, que se vaya a una pagina en blanco que muestre un grafico de carga y luego se vaya a la pagina de los resultados cuando ya tenga todo cargado.

Cualquier ayuda les agradezco, no se como llamar esto tecnicamente para buscarlo por mi mismo! si me pueden ayudar, muy agradecido!

JALF · #2 (**permalink**) 11/07/2007, 19:05

Hola!!!

Pues.... creo que lo que necesitas es manejar AJAX no¿?!!!!!
Bueno si te sirve, aquí te dejo esta dir http://my.opera.com/JALF/ jejejejeje

Es donde tengo publicada mi funcioncita, creo que te puede servir!!!!

Salu2

SI TAN SOLO TUVIERA · #3 (**permalink**) 12/07/2007, 08:56

Gracias compa!!

La verdad no he tratado con el AJAX todavia, pero si he querido. Voy a jalarle a la cosa con la funcion tuya a ver que tal me va.

gracias y saludes por alla a mi cali!

JALF · #4 (**permalink**) 12/07/2007, 12:06

Todo bien todo bien

Si alguna cosa me comentas!!!!

Salu2

SI TAN SOLO TUVIERA · #5 (**permalink**) 12/07/2007, 20:54

Que tal JALF, te comento que no he podido..

Ni siquiera hacer que aparezca el reloj de arena que me parece menos complicado que hacer aparecer el loading.gif, acorde a tu manual.

Tengo dos formas de utilizar t script, con un link hacia la pagina que carga todo el contenido de la BD y con un BOTON que hace la busqueda de acuerdo a las opciones del menu.

Por ahora estoy tratando solo con el link y trata de aparecer el grafiquito del reloj apenas lo presiono, pero no lo alcanza a mostrar, creo que no lo esta leyendo. No se que sera.

Me explico lo que estoy haciendo a ver si por favor me puedes ayudar. La pagina es esta

Subi el .js al raiz, y la carpeta imagenes tambien.

Tengo 3 paginas, index.php, search.php, y results.php

search es el formulario del buscador que esta metido en index y results es la que muestra los resultados de la busqueda, obviamente

en search meti en el cuerpo esto:

Código HTML:

<script type="text/javascript" src="satelite.js">
</script>
<div id="senal" style="visibility:hidden; position:absolute; top:100px; left:100px;">
  <img src="imagenes/reloj_arena.gif" width="32" height="32" />
 </div>

y en el link see all inventory de search.php lo tengo asi:

Código HTML:

<a href="/results.php" onclick="consultar('search.php','contenido','GET','model&min_price&min_year&city&submit&type&cars&max_price&max_year&zip&keyword','senal','http://www.autop10.com');"  target="_self">See all inventory
</a>

Aqui tengo una cuestion con el parametro variables. Este link no recoje ninguna variable de las 9 posibles para hacer la busqueda, ya que simplemente imprime todo el contenido sin ninguna condicion. Entonces no se si asi las tenga bien declaradas.

En la pagina results.php o donde imprime los resultados, el div principal que encierra todo, lo puse asi:

Código HTML:

<div id="contenido" align="center">..resultados..</div>

Me puedes ayudar a saber que estoy haciendo mal?

Gracias!!!

JALF · #6 (**permalink**) 12/07/2007, 21:50

OK amigo lo primero es lo siguiente... o mejor con tu info, mira la solución que te doy y me cuentas

index.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<script type="text/javascript" src="satelite.js"></script>
<div id="senal" style="visibility:hidden; position:absolute; top:100px; left:100px;"> <img src="imagenes/reloj_arena.gif" width="32" height="32" /> </div>
<!-- Aquí cargas tu formulario EJEMPLO <?php include("search.php"); ?> --->
<?php include("search.php"); ?>
<a href="#" onclick="consultar('search.php','contenido','GET','model=01&min_price=2&min_year=1984&city=cali&submit=no se que pones aqui&type=55&cars=ni idea&max_price=25&max_year=2001&zip=no aplica&keyword','senal','http://www.autop10.com/');">See all inventory</a>
<div id="contenido" align="center">..resultados..</div>
</body>
</html>

Este seria tu index.php fíjate bien que el link no apunta a ningún lado, y que la dirección raíz tiene esto "/" al final, el link lo ponemos así apuntando a # para que no cambies de página y poder dejar que AJAX haga lo suyo jejejejeje

Ahora solo necesitas que en la página results.php captures todas las variables que mandas y que hagas lo que necesites hacer con ellas y generes una respuesta. Este codigo es un ejemplo

results.php

Código PHP:

  <?php 
$arrayVars = $_GET; 
$sql = "SELECT id, model, auto, ....... WHERE model = ".$arrayVars[0]." AND ...."; 
(bla bla bla bla bla) 
echo "EL RESULTADO"; 
?>

Recuerda imprimir en "echo" todo lo que vas a mostrar como resultado (bien organizado a tu gusto) en la página.

y ya sabes si quieres que aparezca el reloj de arena entonces dejas esto 'senal' con las comillas, sino entonces escribe esto "null" sin las comillas y listo.

Aquí tengo funcionando la funcioncita para que la veas http://system.3rooks.net/RooKS/

Si alguna duda me comentas que te ayudo con el mayor de los gustos

Salu2

PD: esto

Código HTML:

<a href="#" onclick="consultar('search.php','contenido','GET','model=01&min_price=2&min_year=1984&city=cali&submit=no se que pones aqui&type=55&cars=ni idea&max_price=25&max_year=2001&zip=no aplica&keyword','senal','http://www.autop10.com/');">See all inventory</a>

puede ser reemplazado por esto

Código HTML:

<a href="javascript:consultar('search.php','contenido','GET','model=01&min_price=2&min_year=1984&city=cali&submit=no se que pones aqui&type=55&cars=ni idea&max_price=25&max_year=2001&zip=no aplica&keyword','senal','http://www.autop10.com/');">See all inventory</a>