problema con javascript en pagina cargada por ajax!

protoameeba · #1 (**permalink**) 15/10/2012, 04:45

Buenas, este es un problema recurrente por lo que he visto en la web... el tema es que he probado todo y no me va...

tengo una pagina que al ser cargada por AJAX no me interpreta los javascript.

pagina.php

Código PHP:

Ver original<html>
<head>
 
<title>Modal Popup Demo</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="modal.popup.js"></script>
 
<script language="javascript">
    $(document).ready(function() {   
        //Change these values to style your modal popup
        var align = 'center';                                   //Valid values; left, right, center
        var top = 100;                                          //Use an integer (in pixels)
        var width = 800;                                        //Use an integer (in pixels)
        var padding = 10;                                       //Use an integer (in pixels)
        var backgroundColor = '#FFF';                       //Use any hex code
        var source = 'demo.php';                                //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
        var borderColor = '#FFF';                           //Use any hex code
        var borderWeight = 4;                                   //Use an integer (in pixels)
        var borderRadius = 0;                                   //Use an integer (in pixels)
        var fadeOutTime = 300;                                  //Use any integer, 0 = no fade
        var disableColor = '#000';                          //Use any hex code
        var disableOpacity = 85;                                //Valid range 0-100
        var loadingImage = 'images/lightbox-ico-loading.gif';       //Use relative path from this page
            
        //This method initialises the modal popup
        $(".modal").click(function() {
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
        });
        
        //This method hides the popup when the escape key is pressed
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                closePopup(fadeOutTime);
            }
        });
    });
</script>
 
</head>
 
<body style="margin:20px;">
 
<h1>jQuery Popup Demo</h1>
 
<a class="modal" href="javascript:void(0);"><img src="img/attentionTab_death.png"/></a><br /><br />
<a class="modal" href="javascript:void(0);">Demo</a><br/><br/>
<input type="submit" class="modal" value="Demo"/>
 
</body>
</html>

y en la pagina 2:

demo.php

Código PHP:

Ver original<html>
    <head>
        <script>alert("joder");</script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tiny Scrollbar: A lightweight jQuery plugin</title>
        <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#scrollbar1').tinyscrollbar();   
            });
        </script>
        
    </head>
    
    <body>
        <img src="imagen.jpg"/>
        
        <div id="scrollbar1">
            <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
            <div class="viewport">
                <div class="overview">
                    <h3>Magnis dis parturient montes</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.</p>
                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>
                    
                </div>
            </div>
        </div>  
    </body>
</html>

Como puedo hacer para que me interprete los javascript de la pagina cargada con AJAX...es que estoy bloqueado

he visto otros posts en este foro y en google pero no consigo hacerlo funcionar, si alguien tiene conocimientos de esto...AYUDAME PORFAVOR!!!!!!

muchas gracias!

emprear · #2 (**permalink**) 15/10/2012, 05:28

Asi
http://foros.emprear.com/ajax/html-c.../deportes.html

Analizá la script cargarAjax.js y vas a ver una segunda función llamada cargarRecursos(), esa es la que usas para cargar los css y js asociados a la url que cargas a través de Ajax

Mirá el ejemplo (tres primeros botones)

Saludos

marlanga · #3 (**permalink**) 15/10/2012, 06:50

Ajax sólo te devuelve texto. Lo que haya en el texto, al javascript le da igual. Es decir, si por ajax estás recogiendo scripts de javascripts, éstos no se ejecutarán.

Para forzar a que se ejecuten, hay una peligrosa función llamada EVAL(), que recibe como único argumento, una cadena de texto. Si dicha cadena es código válido de javascript, se ejecutará. Si no lo es, dará un error.

Asi que tu llamada ajax deverá devolver un JSON comuesto por dos cadenas: La primera cadena contendrá el HTML que pegarás en algún sitio; la segunda cadena contendrá los scripts de javascript que quieres ejecutar. Y sobre esa segunda cadena hacer el EVAL.

Pero el uso del EVAl dicen que es peligroso, y no está recomendado por nadie; asi que lo mejor es meter esos scripts en la página principal, y utilizarlos cuando tu petición AJAX responda.

emprear · #4 (**permalink**) 15/10/2012, 06:55

Cita:

Iniciado por marlanga

Ajax sólo te devuelve texto. Lo que haya en el texto, al javascript le da igual. Es decir, si por ajax estás recogiendo scripts de javascripts, éstos no se ejecutarán.

Para forzar a que se ejecuten, hay una peligrosa función llamada EVAL(), que recibe como único argumento, una cadena de texto. Si dicha cadena es código válido de javascript, se ejecutará. Si no lo es, dará un error.

Asi que tu llamada ajax deverá devolver un JSON comuesto por dos cadenas: La primera cadena contendrá el HTML que pegarás en algún sitio; la segunda cadena contendrá los scripts de javascript que quieres ejecutar. Y sobre esa segunda cadena hacer el EVAL.

Pero el uso del EVAl dicen que es peligroso, y no está recomendado por nadie; asi que lo mejor es meter esos scripts en la página principal, y utilizarlos cuando tu petición AJAX responda.

Código Javascript:

Ver originalfunction cargarRecursos(){
                    if(!document.getElementById){
                        return;
                        }
                        var i = 0;for(i=0; i<arguments.length; i++){
                            var archivo=arguments[i];var archivoref="";
                            if(cargarObjetos.indexOf(archivo)==-1){
                                if(archivo.indexOf(".js")!=-1){
                                    archivoref=document.createElement('script');archivoref.setAttribute("type","text/javascript");
                                    archivoref.setAttribute("src", archivo);
                                    }else if(archivo.indexOf(".css")!=-1){
                                        archivoref=document.createElement("link");
                                        archivoref.setAttribute("rel", "stylesheet");
                                        archivoref.setAttribute("type", "text/css");
                                        archivoref.setAttribute("href", archivo);
                                        }
                                        }if(archivoref!=""){
                                            document.getElementsByTagName("head").item(0).appendChild(archivoref);
                                            cargarObjetos+=archivo+" ";
                                            }
                                        }
                                    }

que es la función de mi ejemplo, no requiere el uso de eval, y permitirá cargar dichos recursos en la medida que se necesiten

Saludos

marlanga · #5 (**permalink**) 15/10/2012, 06:59

Anda, no sabía que el createElement cargara scripts ni CSS. A partir de ahora, lo usaré.

protoameeba · #6 (**permalink**) 15/10/2012, 08:37

Hola buenas, muchas gracias por contestar....

perdonaz mi torpeza pero sigue sin funcionarme... explico lo que estoy haciendo:

desde la pagina.php lanzo un "popup" usando jquery a modo de lightbox, bien en ese "popup" no me deja ejecutar codigo javascript...e implementando lo indicado arriba sigue sin funcionar!

Me podriais dar alguna pista mas... es que estoy bloqueado

protoameeba · #7 (**permalink**) 15/10/2012, 08:38

esto es lo que he hecho:

pagina.php

Código PHP:

Ver original<html>
<head>
 
<title>Modal Popup Demo</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="modal.popup.js"></script>
<script type="text/javascript" src="js/cargaAjax.js"></script>
 
<script language="javascript">
    $(document).ready(function() {   
        //Change these values to style your modal popup
        var align = 'center';                                   //Valid values; left, right, center
        var top = 100;                                          //Use an integer (in pixels)
        var width = 800;                                        //Use an integer (in pixels)
        var padding = 10;                                       //Use an integer (in pixels)
        var backgroundColor = '#FFF';                       //Use any hex code
        var source = 'demo.php';                                //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
        var borderColor = '#FFF';                           //Use any hex code
        var borderWeight = 4;                                   //Use an integer (in pixels)
        var borderRadius = 0;                                   //Use an integer (in pixels)
        var fadeOutTime = 300;                                  //Use any integer, 0 = no fade
        var disableColor = '#000';                          //Use any hex code
        var disableOpacity = 85;                                //Valid range 0-100
        var loadingImage = 'images/lightbox-ico-loading.gif';       //Use relative path from this page
            
        //This method initialises the modal popup
        $(".modal").click(function() {
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
        });
        
        //This method hides the popup when the escape key is pressed
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                closePopup(fadeOutTime);
            }
        });
    });
</script>
 
</head>
 
<body style="margin:20px;">
 
<h1>jQuery Popup Demo</h1>
<a class="modal" href="javascript:void(0);" onclick="cargarRecursos('unafuncion.js'); return false;">Demo</a><br/><br/>
 
</body>
</html>

caricatos · #8 (**permalink**) 15/10/2012, 08:44

Hola:

Cita:

Iniciado por marlanga

Ajax sólo te devuelve texto...

Los objetos Ajax devuelven datos responseText y responseXML... o sea que también se puede usar el DOM en una estructura XML (la que particularmente prefiero usar)...

Y sobre la pregunta concreta, si se rescata la respuesta con responseText, es claro que lo que devuelve es un texto...

Saludos

protoameeba · #9 (**permalink**) 15/10/2012, 08:55

Hola caricatos gracias por responder.

podrias ayudarme a entender como hay que hacer para que dicho documento lea los javascripts? Es que no soy capaz de hacerlo funcionar...

protoameeba · #10 (**permalink**) 15/10/2012, 08:56

si pudiese ver un ejemplo sencillo, el que me ha mostrado emprear no me ha funcionado, he especificado mas arriba como he hecho para implementarlo....

emprear · #11 (**permalink**) 15/10/2012, 10:56

Cita:

Iniciado por protoameeba

si pudiese ver un ejemplo sencillo, el que me ha mostrado emprear no me ha funcionado, he especificado mas arriba como he hecho para implementarlo....

No he usado plugin en particular. Pero hay algo que no está claro, en dónde está el contenido de lo que se carga en el modal?
En el código no lo veo definido, y si es una página externa, tampoco, Además, porque pones
onclick="cargarRecursos('unafuncion.js'); ?
unafunción.js es solo aplicable a mi ejemplo
Por último, ese javascript que decís no se ejecuta, ¿usa tambíen jQuery?
Las veces que he usado algo parecido, he usado este
http://www.ericmmartin.com/projects/simplemodal/
Saludos

protoameeba · #12 (**permalink**) 15/10/2012, 21:49

Hola Emprear,

este es el .js que falta:

modal.popup.js

Código Javascript:

Ver originalfunction modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
 
    var containerid = "innerModalPopupDiv";
        
    var popupDiv = document.createElement('div');
    var popupMessage = document.createElement('div');
    var blockDiv = document.createElement('div');
    
    popupDiv.setAttribute('id', 'outerModalPopupDiv');
    popupDiv.setAttribute('class', 'outerModalPopupDiv');
    
    popupMessage.setAttribute('id', 'innerModalPopupDiv');
    popupMessage.setAttribute('class', 'innerModalPopupDiv');
    
    blockDiv.setAttribute('id', 'blockModalPopupDiv');
    blockDiv.setAttribute('class', 'blockModalPopupDiv');
    blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
    
    document.body.appendChild(popupDiv);
    popupDiv.appendChild(popupMessage);
    document.body.appendChild(blockDiv);
    
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
     var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
       if(ieversion>6) {
         getScrollHeight(top);
       }
    } else {
      getScrollHeight(top);
    }
    
    document.getElementById('outerModalPopupDiv').style.display='block';
    document.getElementById('outerModalPopupDiv').style.width = width + 'px';
    document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
    document.getElementById('outerModalPopupDiv').style.background = borderColor;
    document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
    document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
    document.getElementById('outerModalPopupDiv').style.position = 'absolute';
    document.getElementById('outerModalPopupDiv').style.zIndex = 100;
    
    document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
    document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
    document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
    document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
    
    document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
    document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.background = disableColor;
    document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
    document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
    document.getElementById('blockModalPopupDiv').style.zIndex = 99;
    document.getElementById('blockModalPopupDiv').style.position = 'fixed';
    document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
    document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
    
    if(align=="center") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    } else if(align=="left") {
        document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
    } else if(align=="right") {
        document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
        document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
    } else {
        document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
        document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
    }
    
    blockPage();
 
    var page_request = false;
    if (window.XMLHttpRequest) {
        page_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
    } else {
        return false;
    }
 
 
    page_request.onreadystatechange=function(){
        if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
            pageloader(page_request, containerid, loadingImage);
        } else {
            imageloader(url, containerid, loadingImage);
        }
    }
 
    page_request.open('GET', url, true);
    page_request.send(null);
    
}
 
function pageloader(page_request, containerid, loadingImage){
    
    document.getElementById(containerid).innerHTML = '<div align="center"><img src="' + loadingImage + '" border="0" /></div>';
    
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
        document.getElementById(containerid).innerHTML=page_request.responseText;
    }
    
}
 
function imageloader(url, containerid, loadingImage) {
    
    document.getElementById(containerid).innerHTML = '<div align="center"><img src="' + loadingImage + '" border="0" /></div>';
    document.getElementById(containerid).innerHTML='<div align="center"><img src="' + url + '" border="0" /></div>';
    
}
 
function blockPage() {
    
    var blockdiv = document.getElementById('blockModalPopupDiv');
    var height = screen.height;
    
    blockdiv.style.height = height + 'px';
    blockdiv.style.display = 'block';
 
}
 
function getScrollHeight(top) {
   
   var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
           
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
        
        var ieversion=new Number(RegExp.$1);
        
        if(ieversion>6) {
            document.getElementById('outerModalPopupDiv').style.top = h + top + 'px';
        } else {
            document.getElementById('outerModalPopupDiv').style.top = top + 'px';
        }
        
    } else {
        document.getElementById('outerModalPopupDiv').style.top = h + top + 'px';
    }
    
}
 
function closePopup(fadeOutTime) {
    
    fade('outerModalPopupDiv', fadeOutTime);
    document.getElementById('blockModalPopupDiv').style.display='none';
 
}
 
function fade(id, fadeOutTime) {
    
    var el = document.getElementById(id);
    
    if(el == null) {
        return;
    }
    
    if(el.FadeState == null) {
        
        if(el.style.opacity == null || el.style.opacity == '' || el.style.opacity == '1') {
            el.FadeState = 2;
        } else {
            el.FadeState = -2;
        }
    
    }
    
    if(el.FadeState == 1 || el.FadeState == -1) {
        
        el.FadeState = el.FadeState == 1 ? -1 : 1;
        el.fadeTimeLeft = fadeOutTime - el.fadeTimeLeft;
        
    } else {
        
        el.FadeState = el.FadeState == 2 ? -1 : 1;
        el.fadeTimeLeft = fadeOutTime;
        setTimeout("animateFade(" + new Date().getTime() + ",'" + id + "','" + fadeOutTime + "')", 33);
    
    }  
  
}
 
function animateFade(lastTick, id, fadeOutTime) {
      
    var currentTick = new Date().getTime();
    var totalTicks = currentTick - lastTick;
    
    var el = document.getElementById(id);
    
    if(el.fadeTimeLeft <= totalTicks) {
    
        el.style.opacity = el.FadeState == 1 ? '1' : '0';
        el.style.filter = 'alpha(opacity = ' + (el.FadeState == 1 ? '100' : '0') + ')';
        el.FadeState = el.FadeState == 1 ? 2 : -2;
        document.body.removeChild(el);
        return;
    
    }
    
    el.fadeTimeLeft -= totalTicks;
    var newOpVal = el.fadeTimeLeft / fadeOutTime;
    
    if(el.FadeState == 1) {
        newOpVal = 1 - newOpVal;
    }
    
    el.style.opacity = newOpVal;
    el.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
    
    setTimeout("animateFade(" + currentTick + ",'" + id + "','" + fadeOutTime + "')", 33);
  
}

no se como implementar el codigo para que finalmente se ejecuten los jvascripts... ahora lo estoy hahciendo por iframe, pero me gustaria saber como hay que hacer para un futuro....

he puesto onclick="cargarRecursos('unafuncion.js'); porque he creado un .js con mis funciones dentro en un boceto rapido... para probarlo.

Y el javascript que se ejecuta es un alert sencillo, aunque despues si me gustaria hacer algo con jquery como un scroll...

Como estoy bastante perdido y no me aclaro, lo dicho, lo he montado por iframe, porque tenia prisa Y si funciona todo... pero el saber no ocupa lugar, si me puedes iluminar, te lo agradeceria, un saludo!