Foros del Web » Programando para Internet » Jquery »

Cargar js después de un llamado AJAX con JQUERY

Estas en el tema de Cargar js después de un llamado AJAX con JQUERY en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/10/2008, 12:18
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Cargar js después de un llamado AJAX con JQUERY

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 :(
  #2 (permalink)  
Antiguo 27/10/2008, 12:30
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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.
  #3 (permalink)  
Antiguo 27/10/2008, 13:21
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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];
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 (urlid_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_requeridaid_contenedor);
    }
    
pagina_requerida.open ('GET'urltrue); // 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_requeridaid_contenedor)
{
    if (
pagina_requerida.readyState == && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
     
SetContainerHTML(id_contenedorpagina_requerida.responseTexttrue);

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.
  #4 (permalink)  
Antiguo 27/10/2008, 14:23
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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:
Ver original
  1. $(document).ready(function(){
  2.     $.sifr({
  3.         path: 'sirf/',
  4.         save: true
  5.     });
  6.     $('.titular').sifr({ font: 'din_medium' });
  7. });

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:
Ver original
  1. $('.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

Última edición por venkman; 27/10/2008 a las 14:39
  #5 (permalink)  
Antiguo 27/10/2008, 14:27
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Respuesta: Cargar js después de un llamado AJAX con JQUERY

Ok lo comprendo muchas gracias... seguire intentandolo.
  #6 (permalink)  
Antiguo 27/10/2008, 16:36
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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.

Última edición por santisantos; 27/10/2008 a las 16:57
  #7 (permalink)  
Antiguo 27/10/2008, 18:29
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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:
Ver original
  1. $("#capa").load(url, {}, function() {
  2.    $("#titular").sifr({ font: 'din_medium' });
  3. });
  #8 (permalink)  
Antiguo 28/10/2008, 10:16
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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/',
        
savetrue
      
});    
    $(
'.titular').sifr({ font'din_medium'});
}
</script> 
Una cosita para pasar veriables por POST o GET, desde un formulario?

Gracias mill!!!
  #9 (permalink)  
Antiguo 28/10/2008, 10:25
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cargar js después de un llamado AJAX con JQUERY

Cita:
Iniciado por santisantos Ver Mensaje
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:
Ver original
  1. $(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.
  #10 (permalink)  
Antiguo 28/10/2008, 14:08
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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...
  #11 (permalink)  
Antiguo 31/10/2008, 07:56
Avatar de aldo1982  
Fecha de Ingreso: noviembre-2004
Ubicación: Santa Fe (Argentina) Colon F.C
Mensajes: 1.362
Antigüedad: 15 años, 2 meses
Puntos: 6
Respuesta: Cargar js después de un llamado AJAX con JQUERY

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);
}
__________________
LA MUERTE ESTÁ TAN SEGURA DE VENCER QUE NOS DA TODA UNA VIDA DE VENTAJA
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:00.