Cargar js después de un llamado AJAX con JQUERY

[santisantos]

Hola a todos
Tengo un problema, se que es un tema que se ha tratado un millon de veces en el foro, he leido todo el post de Maborak y muchos relacionados y no consigo que me funcione. Bueno por otro lado estoy empezando a usar Jquery, se que con Jquery esto se puede hacer facilmente, alguien me podría indicar como se hace, he probado con los ejemplos que viene en la pagina de Jquery con el getscripts y tal pero no consigo nada. A ver si alguien me puede echar una mano, con algun ejemplillo práctico.


Muchisimas gracias de antemano.
Perdonad si es algo básico y que ya se ha tratado mucho...soy novato :(

[venkman]

Con jQuery es realmente muy sencillo. Si declaras que la respuesta es de tipo HTML (cuando uses $.ajax()), la librería automáticamente ejecuta los tags <script> que haya en ese HTML. También puedes utilizar $.getScript() en caso de que lo que quieras sea cargar sólo Javascript.

Los ejemplos son bastante claros. Si ves que no lo consigues, podrías poner aquí el código que hayas hecho tú y le echamos un vistazo.

[santisantos]

Muchas gracias por contestar tan rápido.

Mira te pongo todos los códigos qu estoy utilizando vale?.
De momento la funcion ajax que he estado utilizando para cargar las páginas no tiene jquery. Te muestro todo y me dices como podria hacerlo con jQuery ya que utilizo este framework para efectos y demas, me gustaria poder hacerlo todo con Jquery.

Este es el codigo que utilizo para cargar las paginas (se llama codigo.js):

Código PHP:

  function SetContainerHTML(id,html,processScripts){ 
mydiv = document.getElementById(id); 
mydiv.innerHTML = html; 
if(processScripts!=false){ 
var elementos = mydiv.getElementsByTagName('script'); 
for(i=0;i<elementos.length;i++) { 
var elemento = elementos[ i ]; 
nuevoScript = document.createElement('script'); 
nuevoScript.text = elemento.innerHTML;  
nuevoScript.type = 'text/javascript'; 
if(elemento.src!=null && elemento.src.length>0) 
nuevoScript.src = elemento.src; 
elemento.parentNode.replaceChild(nuevoScript,elemento); 
} 
} 
} 
 
function llamarasincrono (url, id_contenedor) 
{ 
    var pagina_requerida = false; 
    if (window.XMLHttpRequest) 
    { 
        // Si es Mozilla, Safari etc 
        pagina_requerida = new XMLHttpRequest (); 
    } else if (window.ActiveXObject) 
    { 
        // pero si es IE 
        try  
        { 
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP"); 
        } 
        catch (e) 
        { 
            // en caso que sea una versión antigua 
            try 
            { 
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP"); 
            } 
            catch (e) 
            { 
            } 
        } 
    }  
    else 
    return false; 
    pagina_requerida.onreadystatechange = function () 
    { 
        // función de respuesta 
        cargarpagina (pagina_requerida, id_contenedor); 
    } 
    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send 
    pagina_requerida.send (null); 
} 
// todo es correcto y ha llegado el momento de poner la información requerida 
// en su sitio en la pagina xhtml 
function cargarpagina (pagina_requerida, id_contenedor) 
{ 
    if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1)) 
     SetContainerHTML(id_contenedor, pagina_requerida.responseText, true); 
}  
   

El problema que tengo esque no me carga todos los javascripts. Estoy utilizando Jquery.Sirf para sustituir los textos, titulares y demas. en la pagina principal si funciona (titular que pone empresa si lo sustituye) pero en las paginas que cargo con el ajax no.(titular de quienes somos y de metodos de trabajo no se sustituyen) Sin embargo estoy utilizando un script alerta.js, que simplemente hace un alert y eso si que lo carga...

Hice un pequeño intento con Jquery y cree una funcion para cargar las paginas con ajax:

Código PHP:

  <script> 
function cargar_pagina(capa,url){ 
capa="#"+capa; 
$(capa).load(url); 
} 
</script>  
  

con esta funcion (no veas si reduce codigo...) me ocurria lo mismo. Si me hacia el alert pero, no me cargaba el sirf ni nada mas.

Te pongo el codigo de la pagina principal (empresa.php).

Código PHP:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Editorial Pencil | Empresa</title> 
 
<script type="text/javascript" src="funciones/swfobject.js"></script> 
<script type="text/javascript" src="funciones/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="funciones/jquery-1.2.6.js"></script> 
<script type="text/javascript" src="funciones/jquery.flash.min.js"></script> 
<script type="text/javascript" src="funciones/jquery.sifr.js"></script> 
<script type="text/javascript" src="funciones/dynamic_content.js"></script> 
<script type="text/javascript" src="funciones/codigo.js"></script> 
 
<link href="estilos/estilos_textos.css" rel="stylesheet" type="text/css" /> 
<link href="estilos/pie.css" rel="stylesheet" type="text/css" /> 
<link href="estilos/estilos_capas_empresa.css" rel="stylesheet" type="text/css" /> 
<!--[if lt IE 7]> 
 
<script defer type="text/javascript" src="javascript/png.js"></script> 
<link href="estilos/estilos_capas_empresa_ei.css" rel="stylesheet" type="text/css" /> 
<link href="estilos/pie_ie.css" rel="stylesheet" type="text/css" /> 
<![endif]--> 
</head> 
<body background="imagenes/mosaico_fondo_web.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="javascript:llamarasincrono('quienes_somos.php','textos_apartados_empresa');"> 
<map 
    id="browser" 
 /''name="firefox"  
 /""name="sleipnir_gecko"  
   "name="safari"  
  ""name="konqueror"  
   /name="ie"  
    name="opera"  
    name="lynx"  
> </map> 
 
<script language="Javascript"> 
if (document.getElementById('browser').getAttribute('name')=="firefox"){ 
          function animarPeq(){ 
        $("#intro_juegos").height('229px'); 
        } 
        function animarGrand(){ 
        $("#intro_juegos").height('454px'); 
        } 
} 
else  { 
          function animarPeq(){ 
        $("#intro_juegos").animate({height: "229px"},800,"easeOutExpo"); 
        } 
        function animarGrand(){ 
        $("#intro_juegos").animate({height: "454px"},800,"easeOutExpo"); 
        } 
} 
</script>  
 
<div id="pagina"> 
       
    <div id="navegador"> 
      <img src="imagenes/cabecera.jpg" width="976" height="156" />    </div> 
   
  <div id="intro_juegos">     
       <script type="text/javascript"> 
         var so = new SWFObject("swf/intro.swf", "loader_intro", "100%", "100%", "9"); 
         //so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); 
         so.addParam("quality", "high"); 
         so.addParam("allowScriptAccess", "always"); 
         so.write("intro_juegos"); 
       </script> 
  </div> 
   
    <div id="apartados"> 
       
             <div id="empresa_botones"> 
                  
            <div class="titular" id="titular_empresa">EMPRESA</div> 
           
              <div id="apartados_empresa"><a class="enlace1" href="javascript:llamarasincrono('quienes_somos.php','textos_apartados_empresa');">Quienes Somos</a><br /> 
                <a class="enlace1" href="javascript:llamarasincrono('metodo_de_trabajo.php','textos_apartados_empresa');">Método de Trabajo</a></div> 
               
      </div> 
             
          <div id="textos_apartados_empresa"> 
                   
            <div class="titular" id="titular_apartados"></div> 
      </div> 
           
          <br class="clearfloat">          
  </div> 
  <?php include("pie.php");?> 
</div> 
</body> 
</html>  

y ahora te pongo el código de la página que cargo con ajax (quienes_somos.php).

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Editorial Pencil | Empresa | Quienes Somos</title> 
<script type="text/javascript" src="funciones/jquery-1.2.6.js"></script> 
<script type="text/javascript" src="funciones/jquery.flash.min.js"></script> 
<script type="text/javascript" src="funciones/jquery.sifr.js"></script> 
<script type="text/javascript" src="funciones/alerta.js"></script> 
<link href="estilos/estilos_capas_empresa.css" rel="stylesheet" type="text/css" /> 
<link href="estilos/estilos_textos.css" rel="stylesheet" type="text/css" /> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
  <div class="titular" id="titular_apartados">QUIENES SOMOS</div> 
<div id="raya"></div> 
  <div class="texto_mas_interlineado" id="textos_empresa">Editorial Péncil es una editorial valenciana que inicia su actividad a mediados del 2005.<br /> 
    Su actividad es la producción, edición, distribución y venta directa de libros técnicos de arquitectura y construcción.<br /> 
    <br /> 
    Los usuarios de estas publicaciones son Arquitectos técnicos, Ingenieros, Constructores y Promotores, pero principalmente, Arquitectos y estudiantes de Arquitectura. La calidad de nuestros libros se basa, tanto en el volumen de información de cada proyecto como en el tratamiento de la misma. Este último aspecto es el más valorado por nuestros clientes, y  se ha convertido en  el sello de  la editorial.<br /> 
    <br /> 
    Somos la única editorial que trabaja todos los planos que presentamos (plano de situación, alzados, plantas, secciones, detalles constructivos, leyendas) con el mismo método de  trabajo, alcanzando una correcta valoración de línea y una  homogeneidad en toda la publicación.<br /> 
    <br /> 
    Además de la edición en castellano, a partir del 2007, los títulos también se editan en Inglés y en poco más de un año se venden en casi todo el mundo.<br /> 
  </div> 
</body> 
</html>  
  

Mira aqui te dejo el ejemplo de como lo tengo para que veas lo que sucede. ok? pq creo que todo esto es un poco lio explicarlo por aquí. (la cabecera de la web y eso no va ademas hay ke hacer que el flash no se escale cuando haces el toggle y tal, bueno solo son pruebas)

http://www.nectarestudio.com/demos/webpencil/empresa.php (no puedo poner el enlace directamente sorry)

Muchisimas gracias.

[venkman]

La verdad, no voy a revisar todo el código que tienes que no usa jQuery porque me parece una pérdida de tiempo. (ver el comentario del final)

Leyendo con detenimiento tu problema... veo que el problema que tienes no tiene que ver ni con jQuery ni con nada en particular, sino que es bastante más básico.

El SIFR que usas (y no es que pase sólo con ese, es en general cualquier SIFR) es un tipo de script que se ejecuta una vez, que modifica unos determinados elementos de la página y ya está. Es similar al funcionamiento que tienen Lightbox u otros scripts.

Lo que quiere decir esto es que cuando aplicas el SIFR, tiene efecto sobre los contenidos que tengas en ese momento en que estás ejecutando SIFR. Si luego modificas los contenidos... lógicamente ni ese SIFR ni en general ningún código es capaz de "modificar contenidos que habrá en el futuro".

El asunto, entonces es que si tienes un script de este tipo y modificas el contenido de la página y quieres que ese script se aplique al nuevo contenido, tendrás que volver a aplicar el script. Para ello, tan sólo tienes que buscar qué es lo que se ejecuta al cargar la página y volver a hacerlo: Si miras el final de jquery.sifr.js verás que tienes:

Código javascript:

$(document).ready(function(){
    $.sifr({
        path: 'sirf/',
        save: true
    });
    $('.titular').sifr({ font: 'din_medium' });
});
 

Pues justo ese $(".titular").sifr(...) que has puesto tú, será el que tengas que ejecutar cada vez que cargues c ontenido nuevo al que se lo quieras aplicar. Así que donde recibas la respuesta añade:

Código javascript:

$('.titular').sifr({ font: 'din_medium' });
 

Por lo demás, creo que deberías eliminar esas funciones que tienes para cargar contenido y utilizar lo que te ofrece jQuery. Te ahorrarías mucho trabajo. (En concreto te sobra todo el codigo.js y dinamic_content.js)


También podríais plantearos contratarme :p

[santisantos]

Ok lo comprendo muchas gracias... seguire intentandolo.

[santisantos]

Muchimas gracias.
Por eso te comentaba que preferia hacerlo con Jquery pq suponía que simplificaria cosas. codigo.js y dinamic_content-js son redundantes verdad?
Con esta funcion de Jquery, tb se cargan los javascript?
[B
$(#capa).load(url)[/B].

Cuando dices que debo poner el código $('.titular').sifr({ font: 'din_medium' }); en la página que recibe, te refieres a la pagina principal donde cargo las otras páginas con ajax o a la página que cargo en la principal o en la funcion que utilizo para cargar las paginas?

Disculpa, ya se ke los problemas que me surgen son bastante, bastante básicos... soy muy nuevo en javascript y en general en programación, soy mas diseñador. Y no es por comodidad, llevo varios dias nada mas que leyendome post y post por todos sitios, pero todo me resulta nuevo... capto y capto nueva informacion, pero me resulta complicado.

En cuanto a lo de contratarte :), ojala pudiermos vaya, pero somos un estudio relativamente nuevo, nos resulta imposible en estos momento, si fijate que yo sin tener mucha idea tengo que estar volviendome loco con la programacion...

De verdad, muchas gracias por contestar.

Te gusto nuestra página?. De flash y AS3 si que controlamos más. Pero javascript, php,y demas vamos poquito a poquito aprendiendo.

Y bueno no te molesto más, tb me sucedio otro problema que me traia de cabeza y esque en FIREFOX al utilizar el comendo de Jquery animate (en la cabecera flash, desde flash llamo a la funcion que hace que la capa que lo contiene cambie su altura...) resulta que era como que el flash se reiniciaba, en IE, SAFARI no pasa. Sabes a que se debe eso? Buscando encontre post de gente que le pasaba lo mismo, pero no di con la solución.

[venkman]

Lo de contratarme lo decía de broma, tranquilo ;)

El $(elem).load(url) también ejecuta los <script>s (que yo sepa).

Cuando digo lo de poner el $("#titular").sifr(...) me refiero a ejecutarlo después de haber recibido la respuesta. Es decir, que va en la función que usas para cargar las páginas. Más concretamente donde debe ir es en la función de callback de las llamadas AJAX:

Código javascript:

$("#capa").load(url, {}, function() {
   $("#titular").sifr({ font: 'din_medium' });
});
 

[santisantos]

Muchísimas gracias, ya me ha funcionado.

Código PHP:

  <script> 
function cargar_pagina(capa,url) 
{ 
    capa="#"+capa; 
    $(capa).load(url,{},sirf_text); 
} 
function sirf_text() 
{ 
    $.sifr({ 
        path: 'sirf/', 
        save: true 
      });     
    $('.titular').sifr({ font: 'din_medium'}); 
} 
</script>  
  

Una cosita para pasar veriables por POST o GET, desde un formulario?

Gracias mill!!!

[venkman]

Iniciado por santisantos

Una cosita para pasar veriables por POST o GET, desde un formulario?

Mmmm? No sé muy bien qué quieres decir, pero el segundo parámetro de load() es un objeto de parámetros a enviar en la petición:

Código javascript:

$(capa).load(url,{nombre: "Peter", apellido: "Venkman", codigo: 34},sirf_text);
 

Para hacer peticiones por POST, para ver sintáxis de las llamadas, para ver cómo hacer X o Y o para lo que sea, te recomiendo mirar o bien los documentos oficiales o bien Visual jQuery.

[santisantos]

A lo que me refiero es por ejemplo, a un buscador donde desde un form envias las variables con el criterio de busqueda que quieres que quieres y luego con ajax cargas la pagina de busqueda, la página de resultados.

Muchisimas gracias me estas ayudando muchísimo. Mirare bien la información en la página de Jquery y demás.

Gracias otra vez...

[aldo1982]

Hola pregunto no mas... si se quiere agregar un cargando.gif en que parte y de que forma se pondria ?

o sea algo como la burrada que voy a poner abajo je

function cargar_pagina(capa,url)
{
If webcargando = true {
mostrar contenedor con cargando.gif
}
capa="#"+capa;
$(capa).load(url,{},sirf_text);
}