Miguel Monreal Ordiñana

Combos con ancho fijo en IE (II parte)

Posted on: noviembre 28, 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.

Anuncios

2 comentarios to "Combos con ancho fijo en IE (II parte)"

gracias viejo… la verdad que lo explicaste de una manera muy didactica y prolija.

perfecto, justo lo que necesitaba, gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: