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();
}
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.