domingo, 5 de febrero de 2017

Selectores (o combos) anidados con JavaScript (2ª parte)

En el anterior artículo describí como podíamos anidar dos etiquetas <select> utilizando JavaScript de tal manera que al seleccionar un ítem en el primero se actualizaban los ítems disponibles en el segundo.

En esta ocasión la funcionalidad es otra. En el primer <select> hay un conjunto de ítems disponibles (en el ejemplo, una lista de trabajadores). El segundo está vacío inicialmente. Hay tres botones en el formulario. Los dos primeros (con las leyendas "» »" y "« «") permiten pasar ítems del primero al segundo o viceversa. Cuando un ítem se intercambia de un combo a otro, no permanece una copia, sino que se elimina.

Por último, el botón Enviar hace lo propio de un botón <input type="submit"> pero la función de JavaScript a la que llama fuerza la selección múltiple del segundo combo para que todos esos valores sean pasados al destino.

Selectores (o combos) anidados con JavaScript

Recientemente me vi en la situación de utilizar un <select> anidado en un formulario con datos, además, que provienen de una base de datos.

Navegando en algunos de los muchos blogs sobre programación existentes (y lamento mucho no recordar de cuál saqué la solución) encontré una manera simple para hacerlo utilizando JavaScript.

La idea es la siguiente, un módulo PHP que se ejecuta en el servidor carga los datos y devuelve un HTML al usuario. El script en el servidor incorpora a la página devuelta unos array dentro de un código JavaScript que se ejecutará en el navegador y que contiene los datos a seleccionar. En el ejemplo, trabajadores de varios departamentos.

MochiKit: algo más que una librería JavaScript

Hace poco que descubrí la librería de utilidades MochiKit para JavaScript, no más de un mes. Aún no he tenido la oportunidad de sacar todo el partido a este compendio de herramientas destinadas a facilitar la vida al programador de este lenguaje.

Esta librería, perfectamente documentada y con un amplio repositorio de ejemplos, está formada, a su vez, por un conjunto de bibliotecas de JavaScript orientadas a facilitar el desarrollos de programas tomando muchas ideas de lenguajes interpretados como Python o compilados como Objective-C, llevando su filosofía al terreno de los navegadores y a la ejecución en el cliente.

Blogumus: una nube de etiquetas animada

Ya hacía meses que tenía ganas de meterle mano a la lista de etiquetas de este blog. En mi caso particular tematizo los artículos de una manera particular, haciendo referencia a una web que pueda tener relación con el mismo. Para éste en concreto uso "blogspot.com", por ejemplo.

Como nos pasa a muchos blogueros, la lista de etiquetas se va alargando como la lista de la compra del supermercado así que mi objetivo era esa nube tan "maja" (aunque tan poco legible) que ves a tu derecha, a media página. Aunque ya había probado varias, siempre había algo que no me terminaba de gustar, bien por algún fallo, bien por su falta de adaptación.

Hoy, de casualidad, me he fijado en la que usa Rayajos en el Aire, así que me he tirado a la piscina de su código de plantilla y allí encontré un nombre, Roy Tanck quién presentaba una adaptación de WP-Cumulus para Blogger denominada Blogumus, publicada en Blogger Buster.

Explorando el objeto JSON.feed en Blogger

La semana pasada escribía un sencillo script para añadir a tu blog (si está alojado en Blogger -el servicio blog de Google-) el número de artículos y comentarios publicados a través de una cosa llamada JSON.

La pista me la dio Vida Blogger 2.0 en un artículo sobre un widget de producción propia, muy simple, que utilizaba estas características para añadir a nuestro blog un pequeño recuadro con estos contadores. Y tirando del hilo...

JSON, acrónimo de "JavaScript Object Notation", es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.