Aprendiendo jQuery con la web del Senado, II

Hoy, refactorizando la web del senado, aprenderemos:

  1. A obtener el valor seleccionado de un select.
  2. A ocultar y a mostrar de nuevo un elemento del DOM.
  3. A separar un poco más la funcionalidad javascript del estilo de nuestra web.
  4. A añadir una función a jQuery.
  5. A retrasar la ejecución de nuestro código a que el document html esté listo.
  6. De paso, recordaremos cómo seleccionar un elemento del DOM.

El código original.

El código original es muy simple. Es el siguiente:

En primer lugar, no soy muy fan de poner nombres en español pero, si lo vas a hacer, al menos hazlo bien, mendrugo de pan. Se dice “selecciona”.

Como novedad, iré creando un jsfiddle para que podáis probar el código que vamos creando. La primera versión es ésta. Podréis ver que hay un poco de código extra, ya veremos para qué. Si jugáis un poco con él, veréis que el “Selecioname” cambia de posición. Además está mal escrito.

Empecemos.

Ortografía.

Como ya he dicho, no soy muy fan de poner nombres en castellano en lo que a programación se refiere. Sin embargo, de hacerlo, debemos intentar poner los cinco sentidos en los nombres.

Dicho esto, solucionemos este tema de una vez por todas. El nuevo fiddle recoge los cambios.

Primeros cambios.

Por primera vez, vamos a extender jQuery, vamos a añadir una función al objeto jQuery para saber si devuelve un resultado o no. Llamaremos a la función exist(), y vi esta implementación por primera vez en esta respuesta de StackOverflow.

Vemos que para añadir la función exists sólo tenemos que declararla como un miembro de $.fn.En dicha función, vemos si existe algún elemento comprobando que la longitud de la selección sea distinta a cero. Ésta es la forma más sencilla de extender las capacidades de jQuery.

Dentro de selectCharge, usamos la función $ como aprendimos en la primera parte para seleccionar el elemento div#fs_selecciona_orden. El código ahora mismo no es funcional, pero lo resolveremos en las siguientes secciones.

To display or not to display.

En el condicional, lo que se hace realmente es mostrar o esconder un elemento del dom dependiendo del valor seleccionado en el select.

En vez de modificar la propiedad CSS display del elemento deberíamos usar las funciones show y hide de jQuery. La razón más poderosa es que show y hide recuerdan la propiedad display anterior del elemento. Así, si el elemento tenía display: block; antes de usar hide, al llamar a show volverá a tener display: block;. Esto permite separar mejor el estilo de la programación. Si el diseñador cambiase el estilo del elemento y nosotros no tocásemos el código, la podíamos liar “parda”.

Además, podemos pasar parámetros extra si queremos que se convierta en una animación.

El código en esta fase se parece a lo siguiente:

Retoques finales.

El código requiere de dos toques finales:

  1. La función exists no es realmente necesaria.
  2. Usar jQuery con el parámetro select.

Como ahora estamos usando las funciones show y hide, no necesitamos comprobar que haya un elemento en la colección. Por lo tanto, podemos eliminar ese código.

Por último, vamos a user jQuery para obtener el valor seleccionado del select. En jQuery podemos hacerlo directamente con $(select).val(), suponiendo que select contiene el elemento DOM correspondiente. Personalmente, prefiero encontrar primero el option que está seleccionado. Para ello, usaremos una pseudoclase CSS :selected. Además, ya que estamos, compararemos con un más correcto ===.

Finalmente el código termina así:

Y el fiddle correspondiente nos permite jugar con el código y observar cómo el elemento conserva el display: block.

No tan deprisa.

Al principio os prometí ver qué pasaba con ese código extra que le había metido al fiddle.

La primera parte son dos simples líneas de código que se parecen a esto.

Otra forma de escribirlo, que nos da más pistas de qué sucede, es:

En nuestro código referenciamos elementos de html que pueden no existir cuando el código se ejecuta. Si esto pasa, nuestro código puede, en el mejor de los casos, no funcionar. Para evitar esto, usamos la función $ (otra vez nos encontramos, vieja amiga) pasándole una función que jQuery ejecutará cuando el documento este listo (document y ready, fácil).

¿Qué pasa con la otra parte? Es un poco más complicada de explicar y no voy a explicar exactamente qué sucede con los eventos en jQuery, eso será para otro momento. Veamos el código:

Básicamente, le estamos diciendo a jQuery que, cada vez que un elemento de $('select') cambie (change en inglés), debe llamar a la siguiente función. Para terminar de entenderlo, debemos saber que jQuery hará que la variable this se refiera al select correspondiente. ¿Por qué decir ‘el correspondiente’ cuando sólo hay uno? Pues porque $('select') podría devolver una colección de más de un elemento, en cuyo caso añadiría el callback (así es como llamamos a la función que le pasamos) al evento change de cada uno de los elementos.

Notas finales.

No hemos reducido mucho el código (LoC nunca ha sido un buen indicador de la calidad del código), pero a cambio hemos separado nuestro código del diseño. Si tuviera que hacer ese código, probablemente lo haría de forma diferente (¡Qué coño porras! ¡Lo he escrito hace menos de un mes! ¡Diferente!), pero no está del todo mal.

Author: Serabe

Mathematician, and Ruby and JavaScript programmer. Sometimes I speak at conferences and local meetups.

Leave a Reply

Your email address will not be published. Required fields are marked *