javascript

Algunas recomendaciones de jQuery para el estúpido Internet Explorer

¡Ah!, se siente tan bien poder olvidarse de las largas líneas de Javascript, perdón, ECMAscript, y jugar con jQuery y el DOM. Bueno, al menos hasta que nos topamos con aquel navegador que ignora todos los estándares web: Internet Explorer, lamentablemente aún usado por muchos ingenuos que no conocen otras excelentes opciones.

Este semana tuve que modificar mucho código jQuery para que funcione con el desastroso navegador de Redmond, lo que es mucho más dificil sin una herramienta tan valiosa como Firebug. Internet Explorer solo se limita a dar números de línea, muchas veces sin decir en qué archivo, y crípticos mensajes de error cuando algo no marcha. Me niego a instalar más aplicaciones de Microsoft solo para encontrar errores en su código, es más efectivo pensar un poco, hacer algunos cambios y determinar dónde está el problema si los números de línea cambian. Debugging cavernario, sí, pero efectivo.

Un problema con el que me topé muchas veces al trabajar con Internet Explorer y jQuery fue al usar el método html() para modificar el contenido de cierto elemento, a veces fue necesario hacer cambios mayores en un elemento parent() o incluso usar remove() y luego append() o after() (ver documentación de jQuery). No he podido encontrar la lógica para estos problemas, en algunos casos html() funciona y en otros genera run time errors.

También, al utilizar tablas, como en un calendario que diseñé usando jQuery para pasar los meses, es importante ser estricto con el uso de elementos como thead y tbody.

Hacer que tu aplicación funcione con Internet Explorer no es imposible pero si que quita mucho tiempo y puede generar tendencias suicidas, tanto así que muchos desarrolladores web pensamos seriamente en aumentar nuestras tarifas cuando se trate de crear código para Internet Explorer, y lo digo en serio.

Javascript expected identifier error en Internet Explorer

Algo sumamente extraño estaba ocurriendo con algunas de mis funciones en jQuery, en Internet Explorer 6 y 7 me encontraba con este error: Expected Identifier. Como es usual, todo funcionaba perfecto en Firefox.

Luego de googlear un poco me enteré que esto podía suceder si se usan comas extras en algunas expresiones, muy útil saberlo pero no era mi caso.

Luego de algunas tazas de café encontré la línea causando el problema:

var class = $(this).parent().attr('class');

Sí, class parece ser una palabra reservada en Internet Explorer, gracias nuevamente Microsoft por hacer la vida de los desarrolladores web tan dificil.

Solo tuve que cambiar el nombre de la variable para solucionar el problema, usé algo como esto:

var tabClass = $(this).parent().attr('class');

Un poco después encontré otra referencia al problema de usar class, ¡por un demonio!, ¿y dónde estaba ese artículo cuando estaba buscando la solución? Al parecer tampoco se puede modificar clases usando el método attr() de jQuery en Internet Explorer, bueno, supongo que por eso es que tenemos addClass() y removeClass().

¿Cómo continuar una búsqueda con Firebug?

No es necesario añadir más razones sobre porque debes usar Firebug si desarrollas sitios web, en especial usando DOM scripting, solo quiero mencionar un pequeño detalle que a veces pasamos por alto al usar Firebug para buscar en nuestro código: ¿cómo encontrar más resultados?

Es sencillo, solo debes presionar Enter; y para resultados previos Shift + Enter.

Muchos de los que estamos acostumbrados a usar F3 y Shift + F3 en Firefox hemos tenido esa pequeña confusión al empezar a trabajar con Firebug.

In Silico 2: La isla de los piratas, música del siglo XXI y DOM scripting

Segundo capítulo de In Silico, el podcast con una dosis concentrada de música, noticias y opinión para webmasters profesionales.


powered by ODEO

Descarga el capítulo 2 de In Silico, son 40 minutos cargados de información en apenas 29 Mb.

 Suscríbete vía RSS para recibir los nuevos capítulos de In Silico o vía iTunes

En este capítulo

Libros In Silico de la semana

PPK on Javascript

versión electrónica de PPK on Javascript.

DOM Scripting

versión electrónica de DOM Scripting.