Miguel Monreal Ordiñana

Archive for noviembre 2007

Completando con el post anterior, que además acabo de actualizar con una mejora y un ejemplo, vamos a ver como se puede seguir resolviendo el problema de los select con anchos fijos en IE cuando recargamos combos por AJAX.

  • La pregunta:¿Que más da que recarguemos el combo por AJAX?

Si que da si utilizamos la directiva innerHTML para inyectar el html escupido en una llamada AJAX. Debido a que la directiva innerHTML es propietaria y no pertenece a ningún estandard la W3C recomienda que ante una llamada AJAX se printe XML (y no HTML) y este sea parseado y añadido por DOM, es decir que al elemento select le vayamos insertando hijos con (appendChild). Esta práctica requiere más código de javascript (parseo de XML, inserción hijos al select, etc..) y debido a las incongruencias entre navegadores y a las prisas no se suele hacer, o al menos resulta más rápido recurrir a innerHTML.

  • Vale, utiliza innerHTML e inyectale las option al select

Se puede hacer, pero NO funcionara en IE (esto me suena…). La ñapa propuesta por Microsoft es envolver al select con un div y borrar en cada llamada AJAX el select entero.

Por pasos, nosotros inicialmente tendríamos el siguiente combo:

<select id=”miselect”>
<option>Opcion1</option>

</select>

Para recargarlo haríamos:

document.getElementById(“miselect”).innerHTML = “<option>Opcion2</option>”;

Pero esto NO funciona en IE

La SOLUCIÓN (propuesta por Microsoft):

Envolvemos al select con un div al que ponemos un id

<div id=”miselectDiv”>

<select id=”miselect”>
<option>Opcion1</option>

</select>

</div>

A través de javascript además de inyectarle las option añadimos el propio select (con <select> </select>).

document.getElementById(“miselectDiv“).innerHTML = “<select><option>Opcion2</option></select>”;

Asi SI funcionaria en IE

NOTA:Un error frecuente es olvidar indicar en el select al realizar innerHTML el id si lo tiene o cualquier otro atributo, bien sea class,style, etc.

  • Pero, aunque eliminemos el combo que le hemos indicado, ¿funciona la redimension si pongo el id,no?

Las librerias js de yahoo360 escuchan los eventos del control para que cuando el puntero del ratón esté encima se expanda y no recupere su estado inicial, por lo que si al recargar un combo lo eliminamos además se eliminará la “escucha” a ese componente a no ser que se lo volvamos a indicar con new YAHOO.Hack.FixIESelectWidth( ‘nombre_combo’ ); cuando ocurra la respuesta a la llamada AJAX

En el siguiente ejemplo lo podemos comprobar.