Ahora que esta muy de moda la web 2.0, muchos clientes piden que se recarguen elementos, que aparezcan mensajes, etc y todo sin recargar la página para eso se puede usar complicados y confusos codigos AJAX o DOM pero yo prefiero usar un método mas simple con Jquery.
¿Qué es Jquery?
Jquery es una libreria javascript que nos hace la vida más fácil a la hora de manipular elementos html, enviar formularios con ajax, hacer animaciones y todas esas cosas que llaman web 2.0
Actualizar un elemento sin recargar usando AJAX
Para eso vamos a crear DIV con el id “recargado” donde vamos a llamar el resultado de un archivo PHP, que podría ser la invocación a una base de datos, un mensaje, validación, prácticamente cualquier cosa que hag PHP y porsupuesto sin recargar la página
1 2 3 4 |
Implementando JQUERY
Luego de incluir la libreria jquery
Escribimos nuestro código que se ejecutará cuando demos click al link “recargar”
1 2 3 4 5 6 7 8 9 10 11 | <script language="javascript"> function recargar(){ /// Aqui podemos enviarle alguna variable a nuestro script PHP var variable_post="Mi texto recargado"; /// Invocamos a nuestro script PHP $.post("miscript.php", { variable: variable_post }, function(data){ /// Ponemos la respuesta de nuestro script en el DIV recargado $("#recargado").html(data); }); } </script> |
//////// Update ////////
Para ver como realizar una acción según la respuesta que dé PHP pueden ver este tutorial
Estoy intentando poner música en wordpress (uf, no empezamos bien…) y necesito que se reproduzca de forma contínua de forma que no se reinicie al navegar por la web, se podría utilizar este script para que haga lo contrario: que no recargue?
Hola Miguel,
Aunque soy usuario habitual de tu página esta vez he llegado tras una y mil busquedas en google. En concreto estoy buscando este mismo ejercicio, pero dependiendo de una variable PHP. Es decir el elemento recargado recibe una variable y en funcion de esta muestra una cosa u otra.. ¿es esto posible?
Por más que he buscado no he conseguido encontrar nada util, ¿serieas tan amable de echarme un cable?
Muchas gracias!
Con wordpress no podrías salvo que uses 2 frames en uno tu música y en otro tu wordpress, lo malo es que perderías todas la indexación en buscadores que te brinda WordPress
Si, claro enviando variables via GET o POST si te fijas en esta linea $.post(“miscript.php”, { variable: variable_post } alli le estoy enviando variables a PHP usando POST, luego podría obtener su valor en el PHP con algo como $_POST['variable'], para que muestre una u otra cosa usas IF o CASE if($_POST['variable']==”algo”){echo “un contenido”;}else if($_POST['variable']==”otra cosa”){echo “otro contenido”;}
Pff, muchisimas gracias, justo lo que andaba buscando!, vi tu otro post del envio de formulario también pero creo que lo que quiero hacer está mas aplicado con éste ejemplo!, es para aceptar una “Solicitud de amistad” de una mini-red social, algo asi como en facebook sin que recargue la pagina
Gracias reiteradas!
Pff, muchisimas gracias, justo lo que andaba buscando!, vi tu otro post del envio de formulario también pero creo que lo que quiero hacer está mas aplicado con éste ejemplo!, es para aceptar una \
Impecable!!! me vino al pelo y anda volando.
Consulta, tenia en el php que es llamado ( seria “miscript.php” en el ejemplo ) unos plugins jquery que dejaron de andar al llamar al php de esta forma
Alguien tiene idea que puede haber pasado?
( por ejemplo easyslider un plugin para mostrar imagenes ) si llamo al php desde la url anda bien, pero si lo llamo con el script no anda.
Alguna ayuda ???
No estoy muy seguro en que momento quieres ejecutar pero easylider es un script de esos que se ejecutan sólo al momento de cargar la página. Si invocas sus elementos usando ajax no va a funcionar salvo vuelvas a asignar la acción. Otro posible motivo es que scripts tipo easyslider sólo funcionan cuando se cargan todos los elementos de la página web.
A que te refieres con “volver a asignar la acción” ?
La verdad me tiene loco el tema, le dedique todo el día de hoy y no he podido.
El script se ejecuta dentro del head del objeto “llamado” digamosle.
Veamoslo de otra forma, cuando se carga la página el script busca los elementos y aplica las funciones de un slider por ejemplo o un lightbox; pero sólo al momento de cargar la página, lo que tu haces es llamar a estos elementos después por esto debes hacer que tu script otra vez los busque los elementos y les aplique el slider o un lightbox. Hacer esto varía según el script que se utilize y en algunos casos debemos modificar el plugin. Una solución que me funciona generalmente es no usar document.onready sino dentro de la función que trae los elementos por ajax.
Esta clarisimo!!!
Lamentablemente mis conocimientos aún no llegan a tanto
De todas formas intentaré buscar algo donde leer sobre el tema.
Mil gracias.
Yo creo que es demasiado para mi, pero lo intentaré… gracias! todos tus consejos son de mucha utilidad!
tengo una duda, cuando veo la pagina en el codigo de ejemplo, todo jala muy bien y cuando intento pasarla a mi pagina, no me funciona.
tiene que ver que ya este usando otro script con el Jquery? o se pueden usar los scripts que sean?
La verdad es que podrían ser muchas cosas que ocasionan el error, yo empezaría por usar firebug para buscar el mensaje de error
Buenísimo, lo acabo de implementar en mi página y anda rápido, y lo mejor de todo es que funciona en la bosta de IE6 y sin errores.
Gracias por el mini-tutorial!
Hola, este código lo he implementado antes y funciona perfecto, lo que pasa es que ahora tengo problemas para que funcione en internet explorer, inclusive en la version 8, esto sucede cuando ocupo recargar un div con datos que le envio a través de el url para que ejecute un query en sql y me muestre el contenido según el id, funciona perfecto en firefox y chorme pero no así en internet explorer. Gracias por tu ayuda
A mi se me ha presentado algunas veces un error similar y todo era porque al final de la lista de parámetros de la llamada AJAX me sobraba una coma, de todas formas puedes salir activando Development Toolbar de IE8 y usando sus opciones de debug
es posible pasar un valor del PHP (miscript.php) al script para ver si actualizo o no el div
Simplemente pones un echo en miscript.php y es valor es tomado por jquery como data
Miguel, disculpame pero no te comprendo como recuerarlo en el script me podes pasar un ejemplo gracias de nuevo
Miguel por favor necesito que me des una mano con esto hace unos dias que vengo lidiando con este tema y no le encuentro la vuelta, el div se actualiza perfectamente, pero el problema que tengo es que no quiero que se actualice siempre solo cuando varia la BD, y no se como pasarle un valor desde el PHP al script yo pongo un echo en el php, pero como lo recupero, como se que valor me devuelve, desde el script de nuevo gracias.-
Alguien me puede dar una respuesta a mi duda por favor…
Es una cosa de locos lo que estoy tratando de hacer que nadie me da una respuesta a mi duda.
Puedes ver un ejemplo en este post http://www.miguelmanchego.com/2010/jquery-interactuando-php-con-elementos-sin-recargar/