Problemas con IE y XAJAX

[enriqueplace]

¿Alguien que haya trabajado con Xajax, ha tenido problemas con el navegador IE?

Estoy armando unos combos con cargas por Xajax, donde creo un "select" vacío y ejecuto una función xajax (javascripts) para que lo cargue, donde regresa la información html de su contenido (los "option") y los incluye de forma "innerHTML".

En Firefox funciona correctamente, pero en IE no lo carga, y no da ningún error en javascripts (el debug confirma que la información que regresa del servidor es la esperada).

¿Ideas?

[Cluster]

Por mi parte he trabajado con Xajax .. uso la misma técnica que describí en este mensaje:

http://www.forosdelweb.com/showpost....4&postcount=17

No tengo problemas con IE (versiones 6.x). Uso "innertHTML" vs a la sugerencia que hace en la documentación (Wiki) de Xajax de generar un array en javascript y gestionarlo en forma dinámica (mis datos eran muchos para hacerlo así .. por eso desistí y lo hice con "innertHTML" en su momento).

Si describes el código que usas, tal vez alguien pueda ver el problema (yo poco me acuerdo de "Xajax" .. hace tiempo que no lo uso .. pero veremos que se puede hacer).

Un saludo,

PD: moví el mensaje al foro de Ajax (con "aviso" en el de PHP .. ya ví que colocastes tu mensaje en dicho foro .. no obteniendo respuestas hasta el momento .. pero si tu aportas tu código de ejemplo lo más probable es que alguien te haga sugerencias).

[enriqueplace]

La única diferencia con la documentación oficial es que estoy usando Smarty según como sugieren en el propio sitio de Xajax. Lo bueno es que funciona correctamente con Firefox, y lo malo, es que no carga los combos en IE.

Lo ejemplos que trae el Xajax funciona en ambos navegadores, pero no lo que yo quiero hacer (que es exacto los ejemplos que he visto en todos lados).

Pongo algo de código, resumido lo más posible, para no generar mucho ruido:

index.php - inicia la ejecución del ejemplo, creando la variable "xajax_javascript" con la información necesaria para que funcione Xajax en una plantilla de Smarty.

Código PHP:

  <?php
require_once ($_SERVER[DOCUMENT_ROOT]."/ejemploXAJAX/configuracion.php");
require_once 'miAjax.php';
 
$miT = new Template();
$miT->assign('xajax_javascript', $xajax->getJavascript('xajax'));
$miT->display("index.tpl.html");
 
?>   

index.tpl.html - Plantilla Smarty con el código de los "select", con un javascript que fuerza la carga del primer combo (función xajax), y una llamada a una segunda función para cuando cambie el primer combo, cargue el segundo combo.

Código HTML:

<form name="form" action="prueba.php">
 <table border=1>
  <tr>
   <td>Familia</td>
   <td>   			
    <select id="selFamilia" name="selFamilia" onchange="xajax_cargarSubFamilia(document.form.selFamilia.selectedIndex);">
     <option value=0>Todo</option>
    </select>
   </td>
  </tr>

  <tr>
   <td>SubFamilia</td>
   <td>
    <select id="selSubFamilia" name="selSubFamilia">
     <option value=0>Todo</option>
    </select>
   </td>
  </tr>	   		

 </table>
</form>
				 
<script type="text/javascript">
 // Forzar carga
 xajax_cargarFamilia();
</script> 

miAjax.php - fuente incluido por el index.php, donde contiene todas las funciones de xajax implementadas, y la creación del objeto xajax.

Código PHP:

  require ('xajax/xajax.inc.php');
 
function cargarFamilia($a=""){
 $contenido = "<option value=1>Opcion 1</option>";    
 $contenido .= "<option value=2>Opcion 2</option>";
 $contenido .= "<option value=3>Opcion 3</option>";
    
 $objResponse = new xajaxResponse();    
 $objResponse->addAssign("selFamilia","innerHTML", $contenido);
 return $objResponse;
}
function cargarSubFamilia($fam=""){
    switch ($fam) {
        case 1:
            $contenido = "<option value=1>1Opcion 1</option>";    
            $contenido .= "<option value=2>1Opcion 2</option>";
            $contenido .= "<option value=3>1Opcion 3</option>";        
            break;
        case 2:
            $contenido = "<option value=1>2Opcion 1</option>";    
            $contenido .= "<option value=2>2Opcion 2</option>";
            $contenido .= "<option value=3>21Opcion 3</option>";        
            break;
        default:
            break;
    }
    
    $objResponse = new xajaxResponse();    
    $objResponse->addAssign("selSubFamilia","innerHTML", $contenido);
    return $objResponse;
}
 
$xajax = new xajax(); 
 
$xajax->registerFunction("cargarFamilia");
$xajax->registerFunction("cargarSubFamilia");
 
$xajax->processRequests();
?> 
  

Si alguien descubre el error "sutil", me alegraré mucho

[Cluster]

¿Supongo que no te habrás olvidado de usar el método printJavascript() en tu plantilla (haciendo tu "assing()" correspondiente en el "<head>" del HTML de esa plantilla?

$xajax->printJavascript("../classes/ajax/"); // indica la ruta donde tengas instalado Xajax ...

Sobre todo presta atención a la ruta absoluta hacia la instalación de tu classe Xajax.

Un saludo,

[enriqueplace]

Sí, eso lo hace la siguiente línea (según la documentación en el sitio de Xajax):

Código PHP:

  $miT->assign('xajax_javascript', $xajax->getJavascript('xajax')); 
   

En Firefox funciona correctamente, lo que quiere decir que esto funciona, y si editamos el código generado se encuentran correctamente las líneas que genera esta sintaxis.

Si habilito el debug, veo la información con los "option" que llegan del servidor perfectamente.

El problema es que no lo interpreta el IE y me muestra los combos vacíos (borrando el valor por defecto de "todos" que dejo en el template).

[Cluster]

Iniciado por enriqueplace

Sí, eso lo hace la siguiente línea (según la documentación en el sitio de Xajax):

Código PHP:

  $miT->assign('xajax_javascript', $xajax->getJavascript('xajax')); 
   

En Firefox funciona correctamente, lo que quiere decir que esto funciona, y si editamos el código generado se encuentran correctamente las líneas que genera esta sintaxis.

Si habilito el debug, veo la información con los "option" que llegan del servidor perfectamente.

El problema es que no lo interpreta el IE y me muestra los combos vacíos (borrando el valor por defecto de "todos" que dejo en el template).

Ok ..

Y observas algún error de javascript? (revisa en tu navegador IE o intenta forzar la visualización de mensajes de error de Javascript .. tal vez por ahí veas el problema).

Un saludo,

[enriqueplace]

Segunda cosa que verifiqué, los errores de javascripts. No hay errores, y tampoco de html.

Lo que veo es que el valor por defecto ("todos") es borrado y aparece el combo como si tuviera elementos pero vacío (o por lo menos así me lo muestra el IE).

Estoy viendo de hacer otros ejemplos *mucho más sencillos* e ir subiendo la complejidad para ver en donde cae.

Por ejemplos, los códigos de ejemplos que vienen con el XAJAX funcionan todos en ambos navegadores.

Los "option" llegan bien al IE, pero como si no los cargar vacíos (esa es mi impresión).

[enriqueplace]

Tomo el ejemplo que viene junto al código de Xajax, lo cual cualquier puede pegar y copiar y probarlo.

Saco la información del combo con los colores, creo una función "cargarCombos", y luego agrego un botón que dice "cargar combos".

Funciona en Firefox, pero no en IE.

Será un problema del framework que el código generado para el caso "combos" no es interpretado por el IE (quiero pensar que no).

Código PHP:

  <?php
require ('xajax/xajax.inc.php');
 
function cargarCombos(){
    $contenido = "<option value=\"black\" selected=\"selected\">Black</option>";    
    $contenido .= "<option value=\"red\">Red</option>";
    $contenido .= "<option value=\"green\">Green</option>";
    $contenido .= "<option value=\"blue\">Blue</option>";
        
       $objResponse = new xajaxResponse();    
    $objResponse->addAssign("colorselect","innerHTML", $contenido);
       
    return $objResponse;
}
 
function helloWorld($isCaps)
{
    if ($isCaps)
        $text = "HELLO WORLD!";
    else
        $text = "Hello World!";
        
    $objResponse = new xajaxResponse();
    $objResponse->addAssign("div1","innerHTML",$text);
    
    return $objResponse;
}
 
function setColor($sColor)
{
    $objResponse = new xajaxResponse();
    $objResponse->addAssign("div1","style.color", $sColor);
    
    return $objResponse;
}
 
$xajax = new xajax(); 
 
$xajax->registerFunction("helloWorld");
$xajax->registerFunction("setColor");
$xajax->registerFunction("cargarCombos");
 
$xajax->processRequests();
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>xajax example</title>
    <?php //$xajax->printJavascript('../'); // output the xajax javascript. This must be called between the head tags ?>
    <?php $xajax->printJavascript('xajax'); ?>
</head>
<body style="text-align:center;">
    <div id="div1" name="div1"> </div>
    <br/>
    
    <button onclick="xajax_helloWorld(0)" >Click Me</button>
    <button onclick="xajax_helloWorld(1)" >CLICK ME</button>
    <button onclick="xajax_cargarCombos()">Cargar Combos</button>
    
    <select id="colorselect" name="colorselect" onchange="xajax_setColor(document.getElementById('colorselect').value);">
            <option value="0">Todos</option>
    </select>
    <script type="text/javascript">
    xajax_helloWorld(0); // call the helloWorld function to populate the div on load
    xajax_setColor(document.getElementById('colorselect').value); // call the setColor function on load
    </script>
</body>
</html>  

[enriqueplace]

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>xajax example</title>
			<script type="text/javascript">
var xajaxRequestUri="http://localhost/ejemploXAJAX/helloworld.php";
var xajaxDebug=false;
var xajaxStatusMessages=false;
var xajaxWaitCursor=true;
var xajaxDefinedGet=0;
var xajaxDefinedPost=1;
var xajaxLoaded=false;
function xajax_helloWorld(){return xajax.call("helloWorld", arguments, 1);}
function xajax_setColor(){return xajax.call("setColor", arguments, 1);}
function xajax_cargarCombos(){return xajax.call("cargarCombos", arguments, 1);}
	</script>
	<script type="text/javascript" src="xajax/xajax_js/xajax.js"></script>
	<script type="text/javascript">
window.setTimeout(function () { if (!xajaxLoaded) { alert('Error: the xajax Javascript file could not be included. Perhaps the URL is incorrect?\nURL: xajax/xajax_js/xajax.js'); } }, 6000);
	</script>
</head>
<body style="text-align:center;">
	<div id="div1" name="div1"> </div>
	<br/>
	
	<button onclick="xajax_helloWorld(0)" >Click Me</button>
	<button onclick="xajax_helloWorld(1)" >CLICK ME</button>
	<button onclick="xajax_cargarCombos(0)">Cargar Combos</button>
	
	<select id="colorselect" name="colorselect" onchange="xajax_setColor(document.getElementById('colorselect').value);">
			<option value="0">todos</option>
	</select>
	<script type="text/javascript">
	xajax_helloWorld(0); // call the helloWorld function to populate the div on load
	xajax_setColor(document.getElementById('colorselect').value); // call the setColor function on load
	</script>
</body>
</html> 

[enriqueplace]

Busqué en los foros de Xajax, todos los temas que incluyeran "select" y "option". Luego de descartar temas que no tenían que ver con este problema, me quedo con algunos que recomiendan hacer la carga con javascripts (lo cual no me agrada tener que meter más código, la idea era que solo cargo lo que necesito).

Pero finalmente, encuentro *una sola pregunta* solo que es casi "exacta" al problema que describo y esta es la solución (por lo menos lo arregla por el lado de la función de Xajax):

Código PHP:

  function cargarCombos(){       
   $objResponse = new xajaxResponse();    
   
   // Vacío contenido
   $objResponse->addAssign("colorselect","innerHTML","");
 
   $objResponse->addCreate("colorselect","option","");
   $objResponse->addAssign("colorselect","options[0].value", "black");
   $objResponse->addAssign("colorselect","options[0].text", "black");
 
   $objResponse->addCreate("colorselect","option","");    
   $objResponse->addAssign("colorselect","options[1].value", "red");
   $objResponse->addAssign("colorselect","options[1].text", "red");
 
   $objResponse->addCreate("colorselect","option","");
   $objResponse->addAssign("colorselect","options[2].value", "green");
   $objResponse->addAssign("colorselect","options[2].text", "green");
 
   $objResponse->addCreate("colorselect","option","");
   $objResponse->addAssign("colorselect","options[3].value", "blue");
   $objResponse->addAssign("colorselect","options[3].text", "blue");
       
   return $objResponse;
} 
   

Entrada en el foro:
http://community.xajaxproject.org/viewtopic.php?id=220

De todas formas, no explica por qué con "innerHTML" funciona en Firefox y con IE no, siendo una sintaxis sencilla y ampliamente utilizada.

Escribí en el foro mi pregunta, y espero tener respuesta del por qué no funciona (debería haber existido más preguntas por este problema).

Nota: este ejemplo es "a pedal", lo lógico sería después armar un "for" y repita por loop las líneas correspondientes para cada item (habiendo antes del "for" borrado todos los datos).

PD: No tiene gracia, lo ideal sería que me respondieran con la solución, no que yo la encontrara

[Cluster]

Lo que no entiendo que la misma implementación de "select's" (HTML) y demás con InnerHTML pero NO usando algún sistema de gestión de plantillas (Smarty en tu caso) y haciendolo como HTML "incrustrado" sobre PHP funciona sin problemas en cualquier tipo de navegador.

¿Será que hay algún problema o diferencia entre el método?:
$xajax->printJavascript('xajax');

y el que propone en la documentación si se usa un gestor de plantillas:
$xajax->getJavascript('xajax');

De hecho por mi parte probé la técnica que planteas usando javascript para ir cargando un array de javascript, en la parte "visual" está muy bien esa implementación .. pero, ojala no manejes una cantidad de datos considerable en tus "select" .. por qué sino tu navegador/PC lo sufrirá. (He de ahí que me fuí por la solución "innertHTML" y que comenté más arriba).

Un saludo,

[enriqueplace]

Lo que no entiendo que la misma implementación de "select's" (HTML) y demás con InnerHTML pero NO usando algún sistema de gestión de plantillas (Smarty en tu caso) y haciendolo como HTML "incrustrado" sobre PHP funciona sin problemas en cualquier tipo de navegador.

No te entendí lo último. El InnerHTML, como el ejemplo que puse, con o sin Smarty, no funciona en IE. Ya descarté que el problema fuera el Template. No te olvides que el último ejemplo que muestro, me baso en el "helloworld.php", propio de la documentación que acompaña a Xajax. Solo modifico el combo que está cargado, y creo una función xajax para cargarlo, y deja de funcionar en IE.

¿Será que hay algún problema o diferencia entre el método?:
$xajax->printJavascript('xajax');

y el que propone en la documentación si se usa un gestor de plantillas:
$xajax->getJavascript('xajax');

Como te decía anteriormente, hice pruebas sin Smarty y el problema continuaba.

De hecho por mi parte probé la técnica que planteas usando javascript para ir cargando un array de javascript, en la parte "visual" está muy bien esa implementación .. pero, ojala no manejes una cantidad de datos considerable en tus "select" .. por qué sino tu navegador/PC lo sufrirá. (He de ahí que me fuí por la solución "innertHTML" y que comenté más arriba).

Es que me parece mejor y mucho más práctico (y lógico) la forma de carga con innerHTML, pero no me funcionó en IE (solo la carga de combos, por ahora el resto funciona correctamente). También es raro que no he encontrado en el foro de Xajax reporte sobre este problema (que considero que lo es, un problema), y los casos que vi que cargaban los "option" de los "select" eran todos con soluciones basadas en javascripts, lo que no me agradaba para nada, pues tenía que seguir agregando código del lado de la plantilla de Smarty.

Mi idea original era que a través de Xajax poder "agregar" la información que necesito, dejando la plantilla lo más simple que pudiera.

Al final, la opción más clara que encontré de cargarlos fue esta. No vi ningún ejemplo, tanto en la doc de Xajax, como en los foros, que usara InnerHTML para cargar los combos (y me parece muy raro).