En la primera parte de este tutorial expliqué como hacer funcionar una web modular donde el contenido cargara dinamicamente sin recargar la página usando AJAX sin embargo sólo funcionaba con links del menú y no con links que estuvieron dentro de las páginas cargadas.
Hacer funcionar ajax en links internos
Ese código funciona con el menu pero para que funcione incluso en links de páginas cargadas usando AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código.
1 2 3 4 5 | $('.ajaxmenu').livequery('click',function(){ var loadUrl = $(this).attr('href'); $("#contenido").html(ajax_load).load(loadUrl); return false; }); |
¿Cómo hago funcionar el código si uso anclas?
Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script language="javascript"> $(document).ready(function(){ $.ajaxSetup ({ cache: false }); var ajax_load = "<img src='img/load.gif' alt='loading...' />"; $(".ajaxmenu").live("click", function(){ myUrl= $(this).attr('href'); if (myUrl.match('#')) { var myAnchor = myUrl.split('#')[1]; /*Ahora arreglamos el URL - para evitar problemas en ie6*/ var loadUrl = myUrl.split('#')[0]; }else{ var loadUrl = $(this).attr('href'); } $("#contenido").html(ajax_load).load(loadUrl,function(){ if (myUrl.match('#')) { /*Calculamos la distancia entre el anchor y la pagina y animamos*/ var targetOffset = $("a[name='"+myAnchor+"']").offset().top; $('html').animate({scrollTop: targetOffset}, 400); } } ); return false; }); }); </script> |
Manchego, la verdad que no me esperaba semejante script para un ancla. Que increible!
Bueno muchisimas gracias lo voy a adaptar a mi proyecto para ver como anda.
Atte.
Javier 2
Hola Manchego y gracias por este tutorial, esta perfecto usando jquery y php ya adaptare parte del código a algunos proyectos, sigue con estos tutoriales (te sigo vía RSS).
Si das mas ejemplo de ajax y php o los nuevos métodos de carga con jquery (live) mejor.
Un saludo
increíble modulación que he empezado a utilizar en los 3 proyectos en los que estoy trabajando, me encanta como funciona aunque no siempre va perfecto pero lo importante es que he aprendido ajax gracias a este ejemplo (fijate si te doy las gracias que te he pinchao en la publicidad varias veces xDD )
pero ahora tengo una duda que no consigo resolver, verás, mis enlaces son del tipo http://www.xxx.xxx/index.php/modulo/
para que si viene google o alguien desde fuera no carge la pagina principal y despues ajax, directamente cargo el php del módulo pero aqui el problema el que navega con ajax le sale la web 2 veces, necesito enviar una variable para saber que la página la carga ajax, ó, como puedo saber que la llamada al php la ace ajax? así le devuelvo con php el módulo sin cabecera, pie y demás
ya lo tengo resuelto, me lo he echo así:
$(«#contenido»).html(ajax_load).load(loadUrl+»?a=true»);
–
if (!isset($_GET[‘a’])) {
cabeza();
web();
menu();
web(1);
menu(1);
web(2);
}
$fil = ‘mod_’.$URL[$U].’.php’;
if (is_file($fil)) include ($fil);
else include (‘mod_portada.php’);
if (!isset($_GET[‘a’])) {
web(3);
pie();
}
😀 saludos
Como explique al inicio esta forma de web modular con AJAX debe ser la excepción pero no la regla ya que a google lo que más le interesa es el titulo y los keywords, que una web ajax no cambian de ahi que en SEO no sea una idea muy buena.
Yo creo que lo mejor es mantener ciertos elementos de una página como AJAX ya que recargar todo demora demasiado para un cambio tan mínimo pero no todas las páginas sin más ni más.
lo que yo he echo es que si google entra vea todas las paginas tal cual pero si entra un usuario vea las paginas con ajax para que no tenga que recargar todo mientra que google si lo carga todo y puedo separale las palabras clave, las palabras clave que no cambian en el usuario me dan =, salu2
Hola a todos, alguien sabria decirme como hacer para que en la pagina ajax, php poder hacer andar el boton back del browser? tambien el bookmark.
Atentamente
Javier 2
Hola una pregunta, tengo una pagina que me carga en el div contenido, y desde esa pagina quiero llamar a otra para que me cargue en el div contenido pero los datos quiero pasarlos mediante post. Como puedo hacer eso??? pueden poner un ejemplo de eso si es posible Gracias
Hola una pregunta, tengo una pagina que me carga en el div contenido, y desde esa pagina quiero llamar a otra para que me cargue en el div contenido pero los datos quiero pasarlos mediante post. Como puedo hacer eso??? pueden poner un ejemplo de eso si es posible Muchas Gracias
Hola:
¿Sería posible activar el objeto history.back()? Aún existe mucha gente que maneja la opción del navegador «back» para retroceder en la navegación de la web. He probado el codigo que aquí se ofrece, y la verdad que me ha gustado mucho: sencillo y contundente … por cierto, la musica también está muy bien.
Saludos y felicitaciones.-
Me parece que no ya que las páginas se llaman usando ajax y por lo tanto no se guardan en el historial.
Buenísimos todos los tutoriales, realmente geniales!
Intenté con éste mismo resolver un problema con el que me topé, pero no tuve éxito.
Tengo una web modular en la que uno de los módulos deberia tener un efecto realizado con jquery. Cuando abro la página individualmente funciona perfecto, pero cuando lo cargo en su conjunto todo contenido de jquery desaparece.
¿Hay forma de solucionar ésto?
Desde ya, muchísimas gracias.
Nada. Ya lo solucioné con php.js… perdón por la molestia, y gracias de todos modos! 😉
Hola,
El script está de lujo, me sirvio mucho… pero tengo un problema. Aveces se me pasan URL que van a páginas que no existen y la página carga, carga y sigue cargando, el problema es que los usuarios creen que el sitio es demasiado lento.
– Quisiera saber que debo modificar para mostrar un 404 si la página no existe en directorio pages/Nombrepagina.php
– Atte: gracias
(Lamento activar algo tan antiguo)
La solución no es complicada hay que agregar 3 lineas de código, reviza en la documentación de load http://api.jquery.com/load/ y busca este ejemplo «Example: Display a notice if the Ajax request encounters an error.» que justamente muestra un error si no se encuentra la página solicitada.
hola miguel, realmente estuve navegando por todos lados ya debia solucionar el tema de la musica de flash. Fuiste mi solucion !!! El tema es que en la homepage.php utilizo un slider de flash. Funciona perfectamente al cargar por primera vez. La gran icognita, sale cuando despues de navegar todas las secciones y queres volver al home, el slider no lo muestra. Si tenes algun consejo, lo agradeceria me esta quemando mal la cabeza.-
Siempre mi sugerencia es usar firebug para revizar si hay algún error javascript o no se está cargando algún archivo. No puedo aventurar una teoría porque puede tratarse de mil cosas.
Miguel, sabes como hacer que se carguen 2 php en 2 etiquetas div diferentes de un modo simultaneo? yo lo he intentado con ajax y me surje el problema de que no me carga uno de ellos correctamente. con una no tengo problema, pero con 2 no hay manera, una de las 2 no la carga como debe.
En realidad con usar $(«#midiv»).html(‘tood mi codigo’); colocado 2 veces dentro de una sola función debería bastar
Hola miguel que tal, estan muy buenos tus tutoriales, queria hacerte una consulta, con esto de la web modular, yo quiero cargar una pagina php que tiene el pluggin jcrop, y cuando lo cargo desde la web modular, me carga la foto para cortar, pero no me carga las funciones de pluggin para poder hacerlo, porqué sera ?
Siempre digo lo mismo pero es cierto, en mi experiencia todos los errores con web modular son por la ruta relativa. La ruta relativa del js debe estar en función de index.php y no de includes/header.php. Si revizas con firebug en la pestaña red seguro verás el error en la ruta de tu javascript.
Hola Miguel,
Antes que nada gracias por compartir tus conocimientos, tus post son muy ilustrativos.
Apenas he dado con tu sitio y me parece de muchisima ayuda.
He estado leyendo tu post Ajax enviar formularios sin recargar jquery, he tomado como base la pagina modular que propones en Web modular PHP con AJAX, y me preguntaba si tienes algun ejemplo de como enviar los datos de un formulario mediante un submit que esta en un div, y que estos se carguen en el siguiente div de la misma pagina.
De antemano agradezco tu tiempo y quedo en espera de tus comentarios.
Muchas gracias realmente sos un genio y encima comprtis y enseñas. Ojala Dios te devuelva multiplicado por mil lo que haces por todos los que utilizamos tus recursos
Hola mcomo vas?
Tengo una duda y es la siguiente:
Tengo un menú construido en AS3 por medio de XML, no he podido comunicarme con AJAX para poder llamar las demas pages, estoy usando ExternalInterface.call();
Espero me puedas dar un norte, muchas gracias