You are currently browsing the category archive for the ‘Trampas’ category.

En una página web, se cargan muchas veces las opciones de un elemento SELECT de forma dinámica. Una forma de hacerlo es asignar un nuevo valor al atributo innerHTML. Desgraciadamente esto no funciona con el navegador Internet Explorer.

El atributo innerHTML no es estándar en Javascript, pero todos los navegadores suelen saber interpretarlo como el código HTML entre la etiqueta de inicio y del fin; es decir, el texto entre <SELECT> y </SELECT>. Es un atributo tan poderoso y tan fácil de entender, que cuesta aceptar que el Internet Explorer no lo entiende para un elemento como SELECT, que tantas veces carga un contenido dinámico.
Me imagino que todos los programadores de páginas web se ha estropeado con este problema alguna vez – unos como yo incluso varias veces por no haberse apuntado una nota sobre esta trampa. Espero que este artículo sirva de acortar las penurias de los más prójimos.

Echamos un vistazo al elemento SELECT y los dos botones “Cambiar innerHTML” y “Cambiar outerHTML”. Como este sitio web no permite incluir Javascript, no puedo incluir el ejemplo directamente en el artículo. Para probar y jugar se puede copiar el siguiente código en un fichero vacío, nombrarlo “select.html” y abrirlo en un navegador.

<div style="border: 1pt solid silver; text-align: center;">
	<script type="text/javascript">
		function changeInnerHtml()
		{
			mi_select = document.getElementById("mi_select");
			mi_select.innerHTML =
				"<option>Valor modificado por innerHTML</option>";
		}

		function changeOuterHtml()
		{
			mi_select = document.getElementById("mi_select");
			mi_select.outerHTML = "<select id='mi_select'>" +
				"<option>Valor modificado por outerHTML</option>" +
				"</select>";
		}
	</script>
	<select id="mi_select">
		<option>Valor inicial</option>
	</select>
	<br>
	<input type="submit" value="Cambiar innerHTML" onClick="changeInnerHtml();">
	<input type="submit" value="Cambiar outerHTML" onClick="changeOuterHtml();">
</div>

Inicialmente el elemento SELECT contiene una opción con el texto “Valor inicial”. Pulsando uno de los dos botones se cambia el contenido del elemento SELECT por una opción “Valor modificado”. Podemos elegir entre dos estrategias:

  1. Cambiar el atributo innerHTML, es decir, el texto entre las etiquetas <SELECT> y </SELECT> o
  2. Cambiar el atributo outerHTML que es el código que incluye las etiquetas de inicio y fin del elemento SELECT.

Podemos pulsar estos botones sin miedo – para reiniciar las opciones del elemento SELECT recarga la página.

Dependiendo del navegador que usamos, estos botones funcionan o no. En Mozilla Firefox, por ejemplo, el botón “Cambiar outerHTML” no tiene efecto, ya que el navegador desconoce el atributo outerHTML. Igual que innerHTML, el atributo outerHTML no es estándar tampoco. Sin embargo, Internet Explorer lo reconoce.

En versiones anteriores de Internet Explorer el elemento SELECT aparece vacío tras cambiar su atributo innerHTML.
Microsoft está consciente del problema (ya desde la versión veterana 5 del Internet Explorer) y ha propuesto varias alternativas en su comunicado Error de Internet Explorer establecer la propiedad del objeto seleccionar innerHTML. (Este es el título que fue calculado por el traductor automático en su momento. El título en inglés es “BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object”.)

Parece que se ha “resuelto” este problema en la versión 8: Ahora cambiar el atributo innerHTML no hace nada y se muestra en la lista de errores el mensaje: “El objeto no acepta esta propiedad o método.” Desgraciadamente no es una solución satisfactoria tampoco y no hay más remedio que utilizar una de la propuestas en el artículo mencionado arriba. Para hacer la elección más fácil, la versión 8 de Internet Explorer trata el atributo outerHTML igual como el atributo innerHTML. Es decir, no funciona – igual como en Mozilla Firefox donde nunca funcionó.

En conclusión, la única solución será añadir las opciones de una en una al
elemento SELECT
. En este contexto vale echar un ojo a JSON (JavaScript
Object Notation) antes de componer un bucle de Javascript mediante PHP u otro lenguaje de servidor.
Otra opción, desde luego, es usar un navegador como Opera. Este programa entiende ambas propiedades: innerHTML y outerHTML.

Referencias

Directamente relacionado con este artículo:

Información adicional:

Páginas web de los navegadores mencionados:

Artículos sobre HTML en este blog:

Cuando tenemos una tabla dentro de un texto, muchas veces nos parece lo más bonito de colocarla centrada. Sin embargo, hay una diferencia entre navegadores a la hora de colocar una tabla en el centro de la línea. No es posible conseguirlo únicamente con atributos de estilo. Es necesario especificar el atributo align de la tabla.

El siguiente código es una tabla dentro un elemento DIV con alineamiento centrado:

<div style="border: 1pt solid #fbb; text-align: center;">
	Una tabla con una celda
	<table border="1">
		<tr>
			<td>Una celda</td>
		</tr>
	</table>
</div>

Esto aparece en el navegador así:

Una tabla con una celda 

Una celda

Si tienes abierto este artículo en Mozilla Firefox o Opera, entonces la tabla se encuentra alineado a la izquierda. Si lo tienes abierto en Internet Explorer, entonces la tabla se encuentra centrada – aunque no dentro de este artículo (el autor de CSS de WordPress sabrá como). Hay que copiar el código en un fichero HTML vacío para ver este efecto.

Para poder centrar la tabla en los otros navegadores, es imprescindible de usar el atributo align:

<div style="border: 1pt solid #bfb;">
	Otra tabla con una celda
	<table border="1" align="center">
		<tr>
			<td>Una celda</td>
		</tr>
	</table>
</div>

El navegador muestra este código así:

Otra tabla con una celda 

Una celda

Esta representación aparece con el mismo alineamiento en todos los navegadores.

Referencias

El lenguaje PHP viene con un instalador que se integra bien con el servidor web Apache bajo un entorno Windows. Sin embargo, es posible que el servicio de Apache ya no arranca después de la instalación de PHP. Recibes errores como “PHP Warning: PHP Startup: Unable to load dynamic library” en el fichero error.log del servidor Apache o cuando ejecutas php -i.

Esto es obviamente un error de PHP y podemos esperar que no todas las versiones presentan este problema. Yo lo observé con PHP 5.2. Este problema se debe a que algunos componentes (librerías DLL) tienen incompatibilidades.

Por esto motivo conviene sólo instalar los paquetes que realmente se usan. Esto se puede hacer de dos formas:

  1. Cambiar la instalación de PHP: Ir al panel de control, agregar o quitar programas, y cambiar/quitar la instalación de PHP. En el diálogo del instalador deshabilitar todos los componentes que no se usan.
  2. Editar el fichero php.ini. Buscar la cadena “extenstion=” y comenta todos los modulos que no necesitas.  Procura editar el fichero php.ini en el directorio correcto. En la configuración del servidor Apache httpd.conf encuentras (normalmente al final del fichero) el atributo PHPIniDir que indica la ruta al directorio de PHP.

Después de cambiar la instalación de PHP debes rearrancar el servidor web para hacer efectivo los cambios.

No todos los módulos causan problemas, pero cuando menos quedan mejor. Sin embargo, también arriesgamos correr en el problema contrario. Si PHP muestra un error “Call to undefined function“, entonces no tenemos cargado el módulo necesario que contiene esta función.

Busca esta función en el manual de PHP y comprueba en qué módulo se encuentra. Cuando tienes la página de la función abierta pulsa el enlace “Up” (hacía arriba) para encontrar en la tabla de contenidos la sección de instalación. Puedes habilitar un módulo en las dos formas mencionadas arriba: por el instalador de Windows o descomentando la línea “extenstion=” correspondiente en el fichero php.ini.

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 55 seguidores

Archivos

julio 2019
L M X J V S D
« Nov    
1234567
891011121314
15161718192021
22232425262728
293031