Volver a procesar el javascript del header
Hola a todos!
Antes de nada: GRACIAS AL FORO! Muchos problemas de HTML y CSS los he solucionado buscando en vuestros foros ;-)
Veréis, ahora estoy empezando a trastear con JQuery y necesito saber cómo se hace una cosa básica: recargar el header del javascript cuando cargo / modifico un nuevo objeto mediante Javascript.
Tengo una página madre que contiene 3 objetos que se cargan en jQuery. A estos objetos les llamo mediante esta función:
<script>
$(document).ready(function(){
$("#obj_tasks_user").load("/objs/tasks/tasks_user");
$("#obj_tasks_sort").load("/objs/tasks/tasks_sort");
$("#obj_tasks_status").load("/objs/tasks/tasks_status");
})
</script>
Cada una de esas páginas es código pelao en HTML ¿ok? porque entiendo que se "inserta" dentro del código de la página madre. Es decir, no lo trato como si fuera un iframe que carga una página completa con doctype, header, body... lo que hago es cargar unos objetos que son HTML puro y duro y los inserto dentro de su respectivo div.
Pues bien... todo se ejecuta como yo deseo, pero hay un pequeño problema: cuando cargo la página madre, todos los objetos que cargo mediante .load() no ejecutan los javascripts que declaro en la página madre. Os pongo un ejemplo: para los tooltips utilizo esta famosa librería de jQuery:
<script type="text/javascript" src="/js/jquery.qtip.min.js"> </script>
Pues bien, no funciona en los objetos que cargo mediante .load()
Obviamente, he cargado los objetos pero el navegador no sabe que tiene que renderizar de nuevo el "header" de la página madre para volver a procesar todo de nuevo... (el qTip, por ejemplo, lo tengo programado para que procese todos los objetos con title). Para que funcione tengo que irme objeto por objeto y poner de nuevo los scripts, algo que considero bastante burdo (sobre todo a la hora de mantener la página)
... ví este hilo:
pero no me ayudó mucho la verdad (no soy programador, sólo maquetador).
Os agradecería vuestra ayuda para los que no tenemos ni la "L " en esto de la programación :D. En cuanto tenga esto tendré toda la funcionalidad que necesito para ir creando todas las pantallas.
Un saludo!
P.D. Utilizo la versión 1.7.1 de jQuery, por si hay alguna función novedosa y sencilla ;-)
jacoborus
Debes lanzar qTip en cada vez que cargues un archivo:
$('.selector').qtip({content: {
attr: 'alt' } } )
george_de_la_jungla
Hola jacobo rus,
Antes de nada, gracias por tu interés ;-)
Aunque intuía que podía ser así, relanzando cada uno de esos procesos que tenía abiertos, lo cierto es que es justo lo que quería evitar, por dos razones:
1. No tengo ni idea de javascript y no sé lanzar cada uno de esos procesos (tengo varios componentes, como qTip, ventanas modales, el plugin layout de jQuery, el plugin expand.... ). Algunos componentes como el qTip pueden ser fáciles, pero si me imagino tener que relanzar cada uno de los componentes que he utilizado, me fa un telele, jijiji :D
2. Creo que sería más rápido poder reprocesar el header con la nueva página, para que procese todo de nuevo.
¿Sabes si existe alguna forma para volver a cargar el <head> de una página con objetos cargados por ajax?
Gracias de nuevo,
jacoborus
Hola George, insisto en que deberías relanzar los scripts en lugar de cargar de nuevo el head, ya que lo segundo te generaría un consumo de ancho de banda innecesario además de ralentizar la carga de cada sección. Te dará un poco mas de trabajo, pero en el resultado se notará la diferencia.
De todas formas, si quieres intentar lo otro, la forma rápida que se me ocurre es igual que has cargado los otros .html, con la función load(), aunque no se que resultado dará ya que es un método bastante extraño para esta situación:
$('head').load('index.html head');En lugar da esto yo metería la carga de todos estos scripts en un .html aparte en lugar de cargar directamente el head otra vez
phpninja
Encapsula todo el código del head dentro de una funcion por ejemplo init ().
tendrás que llamar la funcion init() en <body onload="init()"> y en el caso que te interese.
function init(){
$("#obj_tasks_user").load("/objs/tasks/tasks_user");
$("#obj_tasks_sort").load("/objs/tasks/tasks_sort");
$("#obj_tasks_status").load("/objs/tasks/tasks_status");
}
$(document).ready(function(){
init();
});
y después de hacer lo que sea pues otra vez : init();
espero que te sirva. Javascript mOla! : )
george_de_la_jungla
jacobo rus
Hola Jacobo,
Lo probé así pero daba errores... de todos modos gracias por tus comentarios ;-)