Tutoriales que pueden interesarte
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/
Gracias por tu dato, eso era lo que necesitaba, me sirvio de mucho, ya esta funcionando, de nuevo gracias. Gaston
Exelente aporte pero me gustaria saber como aplicarlo a un formaulario en php y que al hacer click en el input de enviar te de la respuesta de gracias tu formulario se ha enviado.
La respuesta a esa pregunta esta aqui http://www.miguelmanchego.com/2009/ajax-enviar-formularios-sin-recargar-jquery/
Hola, saludos, espero que aún esté abierto el tema, yo he implementando algo similar en jsp, las condiciones son las mismas, pero existe el siguiente detalle… tengo un formulario en el cual hay dos «select» que cargan los datos desde la BD.. y una opcion al costado que agrega una opcion al select sin recargar la pagina… se agrega la opcion, pero no puedo actualizar el «select» sin recargar la pagina nuevamente..
o algun jquery que me ayude a actualizar un formulario sin cargar toda la pagina…
Hola, Sin importar el lenguaje de servidor que utilices usando «append» de jquery deberias poder agregar esa opcion adicional sin recargar.
Excelente aporte, vendo productos online y gracias a este tutorial pude hacer mi fan-page de facebook.
Asi es como me quedo:
http://www.facebook.com/pages/Negocios-por-Internet/161823173859524
Saludos y Gracias
Eric Cespedes
International Marketing Concepts, inc
Tupropionegocioencasa.com
Tengo una consulta, he probado todos los codigos y les he hecho varias modificaciones y no puedo llegar a lo que busco:
El codigo descrito arriba es buenisimo pero lo que me falta es que lo que imprime el div se lo asigne automaticamente a una variable php en la pagina index.
Esa variable la necesito en la pagina principal dependiendo lo que reciba de la pagina php y la lleve al index pero no en un div si no en una variable php.
alguien podria ayudarme porfa!!
Hola muy bueno tu codigo, lo estoy usando para agregar productos a un carrito de compra, mi pregunta es si le puedo poner un loading y luego un mensaje «producto agregado»
Gracias
saludos
gracias, por el ejemplo me ayudo en algo aunke aun no resuelvo el problema pues cuando amndo unas variables no logro ke se actualizen… luego les cuento como me fue
Hola, gracias por tu aporte, en verdad me sirvió mucho.
Mil gracias
cuando le envias la variable al archivo miscript.php, ¿se podria tener en ese mismo php varias funciones y especificar la funcion a la cual queremos pasarle la variable?
Muchas Gracias por la informacion!
Ya lo tengo funcionando en mi web sin problemas!
Recomendable chicos!
Excelente explicacion
Hola AMigo, Yo quiero saber como puedo recargar la pagina o una tabla q se dibuja desde MYSQL, es decir veras, en un formulario A envio datos hacia una tabla B, el formulario A solo lo ve el cliente q envia Y la tabla donde llegan los elementos es otro PHP, recopilemos, Envio.php para el usuario A, Tabla-recibos.php usuario B, cuando el usuario A envia, imediatamente el usuairo B debe ver q le llego un registro, he logrado hacer el proceso, pero Resulta q he coloca un jtimer1.0 q me recarga la tabla de recibos, pero existe un problema, esa tabla tiene paginacion y cuando intento llegar a los registros siguientes no alcanzo porq el tiempo del timer, SI le coloco mas tiempo, entonces los registros se tardarian en mostrarse y seria ya un error, si le coloco menos timer no puedo llegar a los otros registros de la paginacion, entonces q se puedo hacer?
Hola AMigo, Yo quiero saber como puedo recargar la pagina o una tabla q se dibuja desde MYSQL, recopilemos, Envio.php para el usuario A, Tabla-recibos.php usuario B, cuando el usuario A envia, imediatamente el usuairo B debe ver q le llego un registro, he logrado hacer el proceso, pero Resulta q he coloca un jtimer1.0 q me recarga la tabla de recibos, pero existe un problema, esa tabla tiene paginacion y cuando intento llegar a los registros siguientes no alcanzo porq el tiempo del timer, SI le coloco mas tiempo, entonces los registros se tardarian en mostrarse y seria ya un error, si le coloco menos timer no puedo llegar a los otros registros de la paginacion, entonces q se puedo hacer?
hola a todos soy novato en php y no se si me aga entender de todos modos gracias por su atencion, estoy en un proyecto en el que tengo un combo box del cual traigo el nombre de empresas pero tengo que filtrar estoy utilisando una caja de texto pero no se como llebar la variable a javascrip a php en el mismo formulario, el codigo es este.
function cambiaTexto(c,o){
o.value
varTextog=document.licencias_de_conduccion.cTexto.value;
o.style.display = ‘none’
c.style.display = ‘inline’
}
function cambiaCampo(c,o,v){
o.style.display = ‘none’
c.style.display = ‘inline’
}
////////////////
select name=»escu_codigo» id=»escu_codigo» onChange=»cambiaCampo(this.form.cTexto,this,this.options[this.selectedIndex].text);» >
Esculelas
consulta(); $datosNumCiud=$datosSqlCiud->filas($datosResCiud);
while($data=$datosSqlCiud->siguiente($datosResCiud))
{ $escu_codi=utf8_decode($data[‘escu_codigo’]);
$escu_nomb=utf8_encode($data[‘escu_nombre’]);
if(!empty($escu_codi))
{
echo «$escu_nomb»;
}
}
echo «»;
?>
hola gracias por el tema, pero tengo un problema es que la pagina se queda leyendo esta es la instrucion
Lo primero sería revizar con firebug si se está produciendo algún error, en la consola podemos ver que que instrucción causa problemas. En algunos navegadores antiguos a veces se quedaba cargando en código javascript aunque me inclino más por la 1era opción
Con jquery puedes capturar el valor de un elemento del formulario o enviarle una variable a PHP usando AJAX (asi se llama la función en jquery)
Que onda amigos, espero alguien me pueda ayudar, tengo una grafica javascript en mi pagina, tambien tengo un Select con 2 opciones, lo que quiero es que al dar click en una de esas opciones se recarge mi grafica sin recargar la pagina completa, gracias.
en un div tengo un formulario pero quiero que al presionar una de las opciones del menu cambie el contenido del mismo div ya sea por otro formulario o cualquier otro contenido, el manejo de los datos de los formularios lo hago con php.
como puedo hacer esto?? gracias!!
Mil gracias! Muy útil! 🙂
Hola, muy buen tutorial..
una consulta?…
como hago para mostrar el script PHP(nombre de archivo), en la barra de direcciones.
Gracias de antemano..
Saludos,
Giancarlo
Yo he utilizado codeigniter y funciona perfecto pero tengo un problemita
$(document).ready(function(){
$(«#customForm»).validationEngine();
});
y
$(document).ready(function() {
$().ajaxStart(function() {
$(‘#loading’).show();
$(‘#test’).hide();
}).ajaxStop(function() {
$(‘#loading’).hide();
$(‘#test’).fadeIn(‘slow’);
});
$(‘#form, #fat, #customForm’).submit(function() {
$.ajax({
type: ‘POST’,
url: ‘../admin/register_user’,
data: $(this).serialize(),
success: function(data) {
$(‘#test’).html(data);
}
})
return false;
});
})
$(document).ready(function() {
$().ajaxStart(function() {
$(‘#loading’).show();
$(‘#test’).hide();
}).ajaxStop(function() {
$(‘#loading’).hide();
$(‘#test’).fadeIn(‘slow’);
});
$(‘#form, #fat, #customForm’).submit(function() {
$.ajax({
type: ‘POST’,
url: ‘../admin/register_user’,
data: $(this).serialize(),
success: function(data) {
$(‘#test’).html(data);
}
})
return false;
});
})
pero aun que tenga que validar envia datos vacios yo lo que quiero hacer primero tiene que validar antes que mandar el post
espero me ayudes
gracias genial articulo mi correo es eduardo_luna09@hotmail.com
Y cuando el bóton que dispará el evento esta dentro de lo que se actualiza?? que se hace para que no se pierda la referencia??.
He intentado y lo único que logro es que tengo que volver a referenciar el código despues del llamado del ajax cosa que me parece horrible.
Gracias, me sirvio bastante este codigo, lo implemente en mi aplicativo y va de maravilla
Buen día, gracias por la información, me ha servido de maravilla para crear combos anidados, pero ahora tengo una pregunta, con este agregado puedo igual subir imagenes sin necesidad de regrescar? saludos.
hola gracias