Ajax a PHP y luego a JavaScript

[AngelJ]

No sé si este tema ya se ha debatido en algún post anterior, en cualquier caso planteo el tema para ver si me podéis ayudar:

Estoy desarrollando una web modular en php, y en uno de estos módulos tengo una llamada a un script que a su vez ejecuta un flash. Hace poco implementé un script en AJAX para evitar que la web se me reactualice cada vez que se pasa de una sección a otra, sin embargo ahora cuando cargo una sección con algún contenido en flash (y su script) no se visualiza, pero si lo ejecuto con la ruta directa (recargándose todo) si funciona.

¿Cual puede ser la solucción?

[Panino5001]

Algunos scripts de incrustación flash utilizan el evento onload de la página. La solución es usar otro tipo de script que no requiera ese evento o pueda ser llamado cuando haga falta para reescribir el innerHTML del objeto que contiene al swf (como swfObject, por ejemplo).

[AngelJ]

Gracias por tu colaboración pero he rastreado los archivos .js y no he encontrado ninguna función onload en uso... Para tratar de daros información más precisa sobre el problema, os introduciré parte del código:

Este es el código javascript con el que empleo para incrustar el flash:

Código js:

function insertaSWF(archivo, ancho, alto, alineacion, wmode, quality, allowScriptAccess) {
 
if(alineacion!=""){
var alineacion_data=alineacion;
}else{
var alineacion_data="center";
}
 
if(wmode!=""){
var wmode_data=wmode;
}else{
var wmode_data="transparent";
}
 
if(quality!=""){
quality_data=quality;
}else{
quality_data="high";
}
 
if(allowScriptAccess!=""){
allowScriptAccess_data=allowScriptAccess;
}else{
allowScriptAccess_data="sameDomain";
}
 
//Comprobamos versión del navegador
if(document.all){//Si es Internet Explorer "quitamos el atributo DATA que no le gusta a IE".
document.write('<object type="application/x-shockwave-flash" width='+ancho+' height='+alto+' align='+alineacion_data+'>\n');
}else{//Si es Firefox
document.write('<object type="application/x-shockwave-flash" data='+archivo+' width='+ancho+' height='+alto+' align='+alineacion_data+'>\n');
}//Fin si
document.write('<param name="allowScriptAccess" value='+allowScriptAccess_data+' />\n');
document.write('<param name="movie" value='+archivo+' />\n');
document.write('<param name="quality" value='+quality_data+' />\n');
document.write('<param name="wmode" value='+wmode_data+' />\n');
document.write('</object>\n');
}
 

Con este script puedo visualizar el flash sin problema cuando hago llamadas "naturales" al archivo, ejemplo:

myweb/index.php?mod=loquesea

Sin embargo cuando hago las llamadas a partir de AJAX para evitar la recarga de la web entera, no se me ejecuta el flash, el efecto es el mismo que si cortara el script que lo llama:

<a href="index.php?mod=loquesea" onclick="processajax ('index.php?mod=loquesea','main','get',''); return false;">Page 1</a>

Este es el archivo de ajax sobre el que trabaja la función:

Código js:

//xmlhttp.js
    
    //Function to create an XMLHttp Object.
    function getxmlhttp (){
        //Create a boolean variable to check for a valid microsoft active X instance.
        var xmlhttp = false;
        
        //Check if we are using internet explorer.
        try {
            //If the javascript version is greater than 5.
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            //If not, then use the older active x object.
            try {
                //If we are using internet explorer.
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                //Else we must be using a non-internet explorer browser.
                xmlhttp = false;
            }
        }
        
        //If we are using a non-internet explorer browser, create a javascript instance of the object.
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            xmlhttp = new XMLHttpRequest();
        }
        
        return xmlhttp;
    }
    
    //Function to process an XMLHttpRequest.
    function processajax (serverPage, obj, getOrPost, str){
        //Get an XMLHttpRequest object for use.
        xmlhttp = getxmlhttp ();
        if (getOrPost == "get"){
            xmlhttp.open("GET", serverPage);
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById(obj).innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.send(null);
        } else {
            xmlhttp.open("POST", serverPage, true);
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById(obj).innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.send(str);
        }
    }
 

Y esto creo que más o menos es todo, espero haber planteado el problema con más precisión.

Saludos.

[Panino5001]

El hecho de usar document.write te está indicando que el script se ejecuta al cargarse la página (en realidad, al cargarse el script). Deberás buscar otro método de inserción que puedas llamar cuando readyState sea igual a 4, para regenerar los swfs (swfObject es una buena opción). No te servirá nada que use document.write, ya que cualquier llamada a ese método cuando la página ya ha sido servida reescribirá su contenido.

[AngelJ]

Acabo de volver a intentarlo con swfobject.js y me sigue haciendo lo mismo:

en el head... (archivo layout)

Código HTML:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("flash/0201-producto.swf", "ban_prod", "557", "104", "9.0.0", "flash/expressInstall.swf");
</script> 

en el body (parte de su correspondiente módulo)

Código HTML:

<div id="ban_prod">

<p><a href="adobe.com/go/getflashplayer"><img src="adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash 

player" /></a></p>

</div> 

La única novedad que he comprobado es que al principio tenía puesta una versión de flash muy alta y me tocó instalarla, ese mensaje alternativo también me salía en la llamada sobre ajax (lógico), pero el script sigue sin ejecutarse.

Saludos.

[Panino5001]

Estás haciendo esto?:

Deberás buscar otro método de inserción que puedas llamar cuando readyState sea igual a 4, para regenerar los swfs

Quizá te haya entendido mal y lo que necesitás es interpretar código javascript presente en la respuesta AJAX. Si eso es así, deberás tratar el responseText para solucionarlo

[AngelJ]

He intentado hacer esto que me comentabas pero no lo he conseguido, esta vez prefiero subir los archivos para que lo veas tu mismo:


Sin embargo si pinchas sobre la etiqueta novedades o sobre algunas de las etiquetas de abajo (page 1 y page 2) el script no se carga, en este caso se hace la llamada a partir de Ajax, sobre el métodfo empleado subí sus archivos anteriomente en este mismo post.

Necesito hacerlo por ajax porque con la ruta directa, el menú flash de arriba en Flash siempre se me recarga, mientras que con ajax no pasa esto.

Saludos.

[Panino5001]

En tu función procesaajax, tenés esto:

Código PHP:

  ...xmlhttp.responseText;  
   

Si querés que se evalúe el javascript que contenga esa respuesta, tenés que cambiarlo por esto:

Código PHP:

  xmlhttp.responseText.tratarResponseText();  
   

[AngelJ]

Pues acabo de intentar 2 cosas y ninguna ha resultado:

Sobre el original (parte del GET de la función procesaajax)

Código PHP:

  document.getElementById(obj).innerHTML = xmlhttp.responseText;  
   

He transformado a:

a)

Código PHP:

  document.getElementById(obj).innerHTML = xmlhttp.responseText.tratarResponseText();  
   

b)

Código PHP:

  xmlhttp.responseText.tratarResponseText();  
   

En la opción a) sigue haciéndo lo mismo de siempre (es lo que ahora está subido en la dirección que te dejé antes), en la opción b) sencillamente carga, pero no interpreta nada de ajax, no me deja pasar a ninguna otra sección empleando llamadas sobre AJAX.

La única novedad es que he localizado un pequeño error sobre la anterior, y es que no tenía subido el archivo externo.js (el que también empleas en tu tutorial), pero no creo que importe demasiado.

[AngelJ]

Bueno, si que he visto que hace algo nuevo: a veces al pasar de novedades a inicio tarda algo más o se queda cerrado en un bucle infinito.

Por otra parte, ¿que sentido das a "evaluar" un script? Quizás en Argentina empleéis en estos aspectos alguna terminología algo diferente, al que yo no consigo sacar un significado exacto.

Saludos.

[Panino5001]

No sé qué estarás haciendo para que suceda eso. Evaluar es hacer lo que hace la función eval (tomar un string y considerarlo como una expresión).
Veamos un ejemplo (podés testearlo aquí: http://www.disegnocentell.com.ar/ejemplo_/ejemplo.php y descargarlo aquí: http://www.disegnocentell.com.ar/ejemplo_/ejemplo.zip).
Este es código utilizado:

Código PHP:

  <?php 
if(isset($_POST['p'])){
    switch($_POST['p']){
        case 'uno':
        echo '
            <script type="text/javascript">
               var so = new SWFObject("ejemplo.swf", "ejemplo", "550", "400", "8", "#CCCCCC");
               so.addParam("quality", "high");
                so.addVariable("data","pagina 1");
               so.write("flashcontent");
            </script>
        ';
        break;
        case 'dos':
        echo '
            <script type="text/javascript">
               var so = new SWFObject("ejemplo.swf", "ejemplo", "550", "400", "8", "#CCCCCC");
               so.addParam("quality", "high");
                so.addVariable("data","pagina 2");
               so.write("flashcontent");
            </script>
        ';
        break;
        default:
        echo '
            <script type="text/javascript">
               var so = new SWFObject("ejemplo.swf", "ejemplo", "550", "400", "8", "#CCCCCC");
               so.addParam("quality", "high");
                so.addVariable("data","inicio");
               so.write("flashcontent");
            </script>
        ';
    }
    exit;
}
?>
<!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=iso-8859-1" />
<title>ejemplo</title>
<script src="swfobject.js"></script>
<script>
String.prototype.tratarResponseText=function(){
    var pat=/<script[^>]*>([\S\s]*?)<\/script[^>]*>/ig;
    var pat2=/\bsrc=[^>\s]+\b/g;
    var elementos = this.match(pat) || [];
    for(i=0;i<elementos.length;i++) {
        var nuevoScript = document.createElement('script');
        nuevoScript.type = 'text/javascript';
        var tienesrc=elementos[i].match(pat2) || [];
        if(tienesrc.length){
            nuevoScript.src=tienesrc[0].split("'").join('').split('"').join('').split('src=').join('').split(' ').join('');
        }else{
            var elemento = elementos[i].replace(pat,'$1','');
            nuevoScript.text = elemento;
        }
        document.getElementsByTagName('body')[0].appendChild(nuevoScript);
    }
    return this.replace(pat,'');
}
function http(){
    if(typeof window.XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();    
    }else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('Su navegador no soporta AJAX');
            return false;
        }    
    }    
}
function request(url,callback,params){
    var H=new http();
    if(!H)return;
    H.open('post',url+'?'+Math.random(),true);
    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    H.onreadystatechange=function(){
        if(H.readyState==4){
            if(callback)
                callback(H.responseText);
            H.onreadystatechange=function(){}
            H.abort();
            H=null;
        }
    }
    var p='';
    for(var i in params){
        p+='&'+i+'='+escape(params[i]);    
    }
    H.send(p);
} 
function evaluar(r){
    r.tratarResponseText();
}
</script>
</head>

<body>
<div id="flashcontent">
</div>
<script type="text/javascript">
   var so = new SWFObject("ejemplo.swf", "ejemplo", "550", "400", "8", "#CCCCCC");
       so.addParam("quality", "high");
    so.addVariable("data","inicio");
   so.write("flashcontent");
</script>
<a href="#" onclick="request('',evaluar,{'p':'uno'})">pagina 1</a> | <a href="#" onclick="request('',evaluar,{'p':'dos'})">pagina 2</a> |<a href="#"  onclick="request('',evaluar,{'p':'cualquiercosa'})"> inicio
</a>
</body>
</html>  

[AngelJ]

Bueno, pues creo que he encontrado el problema que me estaba molestando, parece una bobada, pero tal y como ha sido, es lógico que no me hubiera funcionado nada.

Ahora he descargado el ejemplo que me has dejado, lo he ejecutado como servidor local y funcionaba sin problema, igual que en el link de prueba que me dejaste. Posteriormente he tratado de hacer funcionar este mismo sistema con otra aplicación copiando y pegando parte de código, sin embargo he estado dando vueltas y vueltas y no ha habido manera de ejecutarlo.

El problema finalmente fue el archivo swfobject.js, este archivo le tenía de algunos intentos anteriores pero no era el mismo que el que adjuntabas en tu .zip (se nota por el tamaño de archivo). Sustituyo el archivo original por el que adjuntabas y funcionaba perfectamente, luego lógico que los intentos anteriores de estos días también fracasaran.

He cambiado todos los swfobject.js por el de tu paquete, pero sigue sin funcionar, pero creo que lo que voy a hacer es reempezar de nuevo toda la estructura modular a partir de tu código de eval, que me convence mucho más que el que tenía, y he visto que si introduzco un flash en la página, este no se actualiza cuando cambio en contenido del flascontent.

En cualquier caso te añado la dirección de donde saqué el swfobject.js que no me funcionaba, por si te sirve de referencia.

http://code.google.com/p/swfobject/

Saludos y gracias por tu ayuda, ya te informaré de como acaba la cosa.

Pues de momento he conseguido alguna cosa más, pero no es suficiente.

Cuando entro desde este link funciona bien, si me voy a otra sección y vuelvo a novedades ya no se ve el flash, pero si pulso a página 1 (abajo, encima del chupachups), ya se ve el flash. Es algo lógico porque el div donde se inserta el flas sólo existe en esa sección, pero lo que me interesaría conseguir es un link que me mandara sin recargar el resto de la aplicación a novedades, y que en esta apareciera el flash cargado de inicio (sin tener que pulsar abajo).

Ahora por ejemplo logro que se quede, pero tan sólo un instante.