Hola gente,
En primer lugar, si esto no va aquí, pido perdón desde ya y ruego a los mods que me lo muevan al sitio correspondiente y disculpen las molestias.
Tengo una web con una tabla, en una de sus columnas, tengo un div que se va recargando mediante AJAX mostrando una info u otra dependiendo de la opción elegida. En este div, tengo un formulario con varios SELECTS (sí, soy yo otra vez con lo selects :(...). Para éstos SELECTS tengo un javascript, el cual comprueba que si has elegido una opción en un select, esa opción no esté disponible para el resto de selects. Ahora bien, el código funciona perfectamente para Firefox, pero no para IE. En IE carga muy bien las diferentes divs y cambia de opción pulsando el botón correspondiente...todo esto funciona perfectamente, sin embargo, el javascript no. Creo que el que me está liando la traca es el AJAX por eso lo pongo en este foro, y es que soy muy newbie en AJAX.
Aquí os dejo el código a ver si alguien me puede echar una mano (dejo lo importante, pues la página tiene mil cosas más, si alguien necesita algo más de código, que por favor lo diga y yo encantado):
JAVASCRIPT: (está en un archivo llamado codigo.js)
Código:
function loadColors() {
for (i = 0;i < document.test.elements.length;i++) {
for (j = 0;j < document.test.elements[i].options.length;j++) {
document.test.elements[i].options[j].disabled = false;
for (k = 0;k < document.test.elements.length;k++) {
if (i != k) {
if (document.test.elements[i].options[j].text == document.test.elements[k].options[document.test.elements[k].selectedIndex].text)
document.test.elements[i].options[j].disabled = true;
}
}
}
}
}
(en codigo.js)
Código:
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}
function Cargar(url){
var contenido = document.getElementById('contenido');
ajax=nuevoAjax();
ajax.open("GET", url,true);
ajax.onreadystatechange=function(){
if(ajax2.readyState==4){
contenido.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
function traerDatos(tipoDato)
{
// Obtendo la capa donde se muestran las respuestas del servidor
var capa=document.getElementById("contenido");
// Creo el objeto AJAX
var ajax=nuevoAjax();
// Coloco el mensaje "Cargando..." en la capa
capa.innerHTML="";
// Abro la conexin, envo cabeceras correspondientes al uso de POST y envo los datos con el mtodo send del objeto AJAX
ajax.open("POST", "tactica.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("d="+tipoDato);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
// Respuesta recibida. Coloco el texto plano en la capa correspondiente
capa.innerHTML=ajax.responseText;
}
}
}
LA FUNCIÓN LOADCOLORS VA AQUÍ DEBAJO.
(en la principal)
Código HTML:
<td width="445">
<table width="444" height="489" border="0" bordercolor="#000000" bgcolor="#999999" background="Imagenes/campo.jpg" valign="middle"><tr>
<td width="444">
<form name="test" method="post" action=""><div id="contenido"></div></form></td></tr></table></td> SELECTS: (en el archivo php que se carga en la div del ajax, los valores fijos luego se cambiarán por valores cogido de una BBDD, pero primero a sacarlo en IE y luego pasamos al nivel 2 jejeje)
Código HTML:
<tr>
<td width="105" height="42"><label> </label>
<div align="center">
<select name="color1" onChange="loadColors();">
<option value="1">Rojo</option>
<option value="2">Amarillo</option>
<option value="3">Verde</option>
<option selected="selected" value="4">Azul</option>
<option value="5">Negro</option>
<option value="6">Blanco</option>
</select>
</div></td>
<td width="105"><label> </label>
<div align="center">
<select name="color2" onChange="loadColors();">
<option selected="selected" value="1">Rojo</option>
<option value="2">Amarillo</option>
<option value="3">Verde</option>
<option value="4">Azul</option>
<option value="5">Negro</option>
<option value="6">Blanco</option>
</select>
</div></td>
<td width="105"><label> </label>
<div align="center">
<select name="color3" onChange="loadColors();">
<option value="1">Rojo</option>
<option selected="selected" value="2">Amarillo</option>
<option value="3">Verde</option>
<option value="4">Azul</option>
<option value="5">Negro</option>
<option value="6">Blanco</option>
</select>
</div></td>
<td width="94"><label> </label>
<div align="center">
<select name="color4" onChange="loadColors();">
<option value="1">Rojo</option>
<option value="2">Amarillo</option>
<option selected="selected" value="3">Verde</option>
<option value="4">Azul</option>
<option value="5">Negro</option>
<option value="6">Blanco</option>
</select>
</div></td>
</tr>
Desde ya mil gracias y espero que alguien me pueda echar una mano, porque seguro que es una tontería que he pasado por algo, pero insisto, soy muy novato en AJAX.
Gracias!!