Funciona en Firefox, pero no en IE - Ayuda

[mikenrry]

Hola amigos de ForosDelWeb, sé muy poco sobre este tema de ajax, y me he encontrado con el siguiente problema que aún y luego de muchas horas de intentos no puedo solucionar.

Se trata de listas enlazadas, dependientes, usando ajax (eso creo) obtengo los datos desde la BD. En firefox funciona perfecto!, Pero en IE no pasa absolutamente nada!.

Aparentemente, cuando la consulta a la BD devuelve el "echo", IE no crea los <option value.....>.

Aqui les dejo el código a ver si Uds me puede ayudar! Les agradezco muchisimo.

archivo ajax.js

Código:

function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
function MostrarConsulta(datos){

	codi = document.getElementById('codigo').value;
	divColores = document.getElementById('color');
	ajax=objetoAjax();
	ajax.open("GET", datos);
	ajax.open("POST", datos+"?codigo="+codi);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			divColores.innerHTML = ajax.responseText
		}
	}
	ajax.send(null)
}

El formulario

Código PHP:

 <form name="consulta" action="">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th width="15%" scope="col">&nbsp;</th>
      <th width="85%" scope="col">&nbsp;</th>
    </tr>
    <tr>
      <td>Artículo:</td>
      <td><select name="codigo" id="codigo" onchange="MostrarConsulta('getCities.php'); return false">
       <?php
        $codigos = mysql_query("SELECT * FROM articulos ORDER BY codigo ASC");
while ($code = mysql_fetch_array($codigos)) {
?>
<option value="<?php echo $code['codigo']; ?>"><?php echo $code['codigo']; ?></option>
<?php
}
mysql_free_result($codigos);
?>
</select>
      </td>
    </tr>
    <tr>
      <td>Color:</td>
      <td><select name="color" id="color">      
      </select>
      </td>
    </tr>
    <tr>
      <td>Talle:</td>
      <td><select name="talles" id="talles">
      </select>
      </td>
    </tr>
      <td><input type="reset" name="button2" id="button2" value="Borrar" />
      <input type="button" name="Submit" id="button" value="Pedir Producto" /></td>
    </tr>
  </table>
</form>  

el .php donde se ejecuta la consulta

Código PHP:

  <?php
include('dbase.php');
// Conexión a la base de datos
mysql_connect ($dbhost, $dbusername, $dbuserpass);
mysql_select_db($dbname) or die('Cannot select database');
    $codigo = $_GET['codigo'];
    $color = mysql_query("SELECT * FROM articulos_colores WHERE codigo_articulo ='$codigo'");
    while($cod = mysql_fetch_array($color))
    {
        echo "<option value='color1' id='color1'>".$cod['color']."</option>";
    }
?>   

[foreverOdd]

El <select> en IE tiene un bug para la propiedad innerHTML, es decir, debes buscar otra manera de hacer la carga de la lista para que sea crossbrowser

[mikenrry]

Gracias amigo, tendré que investigar sobre eso, tal vez alguien mas sepa como solucionar esto. Salu2.

[GatorV]

Una opción es regresar el objeto <select> completo, no nada mas los options.

Saludos.

[mikenrry]

A probar!!

[mikenrry]

Muchísimas gracias chicos, especialmente al moderador que contestó, lo hé solucionado trayendo el select y los options desde la consulta.

Código PHP:

  <?php
include('dbase.php');
// Conexión a la base de datos
mysql_connect ($dbhost, $dbusername, $dbuserpass);
mysql_select_db($dbname) or die('Cannot select database');
    $codigo = $_GET['codigo'];
    $color = mysql_query("SELECT * FROM articulos_colores WHERE codigo_articulo ='$codigo'");
    echo"<select name='color' id='color'>";
    while($cod = mysql_fetch_array($color))
    {
        echo "<option value='".$cod['color']."' id='".$cod['color']."'>".$cod['color']."</option>";
    }
    echo"</select>"
?>   

[GatorV]

Creo lo ideal es que investigaras otra opción como por ejemplo obtener los datos desde JSON, así puedes abstraer lo que es la fuente de datos de lo que es tu aplicación.

Saludos.

[clodoviro]

yo te diría que uses DOM...:D

[iandrade]

Con DOM se soluciona, pero tendras que usar un AJAX real*, que te permita traer los datos y creando un objeto de tipo option p. ej

suponiendo que logras traer cada uno de los datos seria en valorActual y TextoActual
//...
var obj = document.getElemtentById("SelectDestino");
obj.length = 0 // Con esto quitas las opciones anteriores
for (i=0;i<TotalElementos;i++){
obj.options[obj.options.lenght] = new option (valorActual,textoActual);
}
//

* Te digo Real porque si no empleas ni un apice de XML no puede llamarse propiamente ajax