Hace no mucho tuve un cliente que insitia en tener un flash con musica en su pagina web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implicaba reprogramar varias cosas, intenté convencer al cliente de lo inconveniente de usar frames y de poner música pero no aceptó.
En vista de esto tuve que inventar algo que permita que mi página funcione sin demasiados cambios y darle el gusto al cliente, por lo que implementé esta solución usando AJAX, para ser más preciso jquery.
Web Modular
La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior.
Cargar los contenidos sin recargar
Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu
1 2 3 4 | <a href="pages/homepage.php" class="ajaxmenu">Homepage</a> | <a href="pages/aboutus.php" class="ajaxmenu" >About Us</a> | <a href="pages/services.php" class="ajaxmenu" >Services</a> | <a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a> |
y agregando este código al top_page.php dentro del header y entre etiquetas script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function(){ $.ajaxSetup ({ cache: false }); //// Imagen mientras carga el contenido var ajax_load = "<img src='img/load.gif' alt='loading...' />"; // Interceptar el link de los menus $(".ajaxmenu").click(function(){ /// Extraemos el nombre de la pagina que esta en el link var loadUrl = $(this).attr('href'); /// Llamamos el contenido $("#contenido").html(ajax_load).load(loadUrl); return false; }); }); |
En la segunda parte de este tutorial explico como hacerlo funcionar cuando los links son internos, y más importante cuando usamos anclas
Que tal, utilize este ejemplo para llamar a un un php que elimina registros por medio de un link, el resultado es mostrado en un div ‘resultado’ pero esto solo funciona la primera vez la segunda el link me lleva a otra pagina (si ejecuta el php pero en otra pagina), alguna idea de cual sea el problema?
Hola, hay varias posibilidades las 2 más comunes es que tu javascript tenga algún error(no necesariamente con el ajax sino cualquier otra cosa bloquea la ejecución) que se marca (revisalo con la consola firebug) esto impide que luego vuelva a ejecutarse y la segunda opción es que estes modificando el DOM de la página por o que tendrías que usar “live” de jquery
Que tal gracias por el tiempo, estuve haciendo unas pruebas, y utilize el livequery (que espero sea el que me recomendaste) pero el problema sigue supongo que tiene que ver con un script ajax que utilizo para paginar, no logro detectar el problema podrias orientarme un poco? Nuevamente gracias. Subi el pequeño ejemplo en este link:
http://abarrotes-mayra.host56.com/citas.php
Hola Miguel, como estas?
Estoy armando un website con tu ejemplo.
Tengo un menu, submenu, footer y el main que seria donde va todo el contenido de la pagina.
No tuve problemas cargando archivos php desde el menu, submenu y footer ya que em carga todo perfectamente en el main.
Pero tuve un problema y te agradeceria muchisimo si me podrias ayudar.
Cargo una pagina en el main y en esa misma pagina (dentro del main) hay un link a otro contenido que teoricamente se tendria que cargar en el mismo main, pero no. Me lo carga en un html aparte.
Sera que es posible linkear una pagina desde dentro del main?
Desde ya muchas gracias por todo. Sigo siempre tu mailing es muy interesante.
Atte.
Javier
PD: soy otro Javier.
Hola, recordemos que para hacer funcionar este ejemplo los links tienen una clase especial llamada ajaxmenu para que jquery los detecte y los muestre en el div ‘resultado’ si aún asi no funcionara debido a que es contenido ajax hay que agregar el método live de jquery (basicamente mover una linea, en la documentacion explica ampliamente como funciona)
Jaja me consta que es otro Javier, bueno despues de un batallar un rato llegue a la solución. Si, el problema estaba al momento de modificar el DOM utilize livequery y arreglado, quizas ese sea tambien tu problema Javi. Prueba con ello y veras.
A por cierto yo tambien sigo el blog, practicamente diario mis felicitaciones de nuevo para Mr. M.M.
Hola M.M, hola Javier!
Muchisimas gracias por ambas respuestas.
Me imagino a Manchego siendo acosado por 2 Javier al mismo tiempo y con las mimsas preguntas. Demaciado.
Javier, perdon estoy algo perdido con el livequery ya lo he bajado de la pagina pero no me doy cuenta como usarlo en mi proyecto.
Si quieres te puedo mandar un mail a tu correo directamente, por las dudas este es mi correo.
javirigoni arroba gmail puntocom
Desde ya muy agradecido a los dos, voy a seguir investigando!
Javier
Lo bajaste? esta función ya vienen con el propio jquery la idea es mover la linea de código que controla el evento click usando live, su documentación aqui http://docs.jquery.com/Events/live#typefn aunque si Javier (el otro
puede compartir la modificación seria genial)
Que tal Manchego,
Muchisimas gracias por el link con el tutorial ya lo leo, espero entenderlo.
Bueno te daras cuenta que soy un simple principiante en esto de AJAX.
Espero que el otro Javier este por ahi todavia. Si estas Javier te agradeceria muchisimo tu ayuda.
Sinceramente
Javier 2
Hola Miguel, gracias a Javier 1 he podido resolver el tema de los links dentro del div contenedor. Pero me ha surgido otro problema, es minimo pero me gustaria saber si es posible arreglarlo. Haber si me hago entender:
Tengo la pagina principal, cargo info en en el div \
se corto el mensaje anterior
cargo info en el div contenido.
esa info tiene un sublink qu equiero que me lleve al ancla en otra pagina, pero no logro que funcione.
Ahora el script lo tengo asi:
Link
Hola Manchego,
Tengo una consulta.
Como sabras estoy con una pagina web y estoy utilizando este sistema de paginas ajax, php modular.
Pero tengo un peuqenio problema, y queria saber si tiene solucion. Al script de la pagina necesito hacerlo con
y parece que o php o jquery no me lo reconoce ya que cuando habro los menu me los habre en una ventana diferente.
Se te ocurre cual puede er el problema?
Muchisimas gracias,
Javier
pd: Disculpas por las enies, este teclado no tiene.
Tambien si tienes novedades acerca de los anchor con gusto las escuchare.
se corto, va de nuevo:
con codificacion
japanese, charset “Shift_JIS”