jQuery, obtener valores de un grupo de checkbox

9 julio, 2013 Reply

Últimamente he tenido que trastear con el back-office de una tienda Prestashop y me he encontrado con ciertos formularios a los que tenía que añadir funcionalidades sin poder modificar los mismos, ¿la solución? jQuery al rescate! jQuery es una popular librería escrita en Javascript que facilita muchas de las tareas que el programador debe realizar, entre otras cosas, facilita el acceso y manipulación de los elementos HTML, simplifica las peticiones Ajax, y utilizando sus funciones, te puedes despreocupar de los problemas de compatibilidad de Javascript que presentan los distintos navegadores, jQuery ya se encarga de lidiar con ellos por ti.

Acceder a los valores seleccionados de un grupo de checkbox

Un grupo de checkbox en un formulario podría ser así:

1
2
3
4
5
<input id="orderBox1" type="checkbox" name="orderBox[]" value="1" />
<input id="orderBox2" type="checkbox" name="orderBox[]" value="2" />
<input id="orderBox3" type="checkbox" name="orderBox[]" value="3" />
<input id="orderBox4" type="checkbox" name="orderBox[]" value="4" />
<input id="orderBox5" type="checkbox" name="orderBox[]" value="5" />

Como vemos, hay 5 checkbox, cada uno con su correspondiente valor (en este caso del 1 al 5), pero con el mismo nombre orderBox[] los [ ] sirven para indicar que se trata de un mismo grupo, un array de valores.

:checked es el selector que tenemos que utilizar para obtener los valores correspondientes a los checkbox seleccionados, los selectores se pueden combinar de múltiples maneras, podríamos simplemente acceder así $(“#formId :checked”) lo cual nos devolvería todos los inputs seleccionados del formulario, pero a mí me gusta afinar un poco más, yo accedería indicando exactamente a que grupo de checkbox nos referimos, mi selector ideal sería $(‘input[name="orderBox[]“]:checked’)

Procesar los valores obtenidos

Básicamente podemos recorrer los objetos que devuelve jquery y almacenarlos en un array:

1
2
3
4
5
6
var checkboxValues = new Array();
//recorremos todos los checkbox seleccionados con .each
$('input[name="orderBox[]"]:checked').each(function() {
	//$(this).val() es el valor del checkbox correspondiente
	checkboxValues.push($(this).val());
});

O podemos almacenar los valores en una cadena separados por comas para su posterior envío:

1
2
3
4
5
6
7
var checkboxValues = "";
$('input[name="orderBox[]"]:checked').each(function() {
	checkboxValues += $(this).val() + ",";
});
//eliminamos la última coma.
checkboxValues = checkboxValues.substring(0, checkboxValues.length-1);
//si todos los checkbox están seleccionados devuelve 1,2,3,4,5

También podemos utilizar los métodos serialize() y serializeArray() de jQuery Atención, no hace falta incluir :checked, jQuery ya se encarga de filtrar los elementos seleccionados:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$('input[name="orderBox[]"]').serialize();
/*
Devuelve una cadena codificada con el estándar URL. Por ejem. si solo hemos seleccionado los checkbox 1, 3 y 5, devuelve:
orderBox%5B%5D=1&amp;orderBox%5B%5D=3&amp;orderBox%5B%5D=5
*/
 
$('input[name="orderBox[]"]').serializeArray();
/* 
Devuelve un array de objetos. Por ejem. si solo hemos seleccionado los checkbox 1, 3 y 5, devuelve:
[
  {
    "name": "orderBox[]",
    "value": "1"
  },
  {
    "name": "orderBox[]",
    "value": "3"
  },
  {
    "name": "orderBox[]",
    "value": "5"
  }
]
*/

Sam Muirhead en las conferencias Open Design / Shared Creativity

25 junio, 2013 Reply

El 5 y 6 de Julio se celebra en Barcelona el congreso internacional Open Design / Shared Creativity, un espacio de reflexión anual sobre la cultura del diseño abierto y su potencial en las profesiones creativas.

Sam Muirhead me ha llamado especialmente la atención, se trata de un cineasta que quiere vivir un año al estilo open source:

+ info:
http://fad.cat/congres/es/
http://yearofopensource.net/

WordPress y el misterio del Text Widget desaparecido

3 mayo, 2012 Reply

Al migrar worpdress de un dominio a otro, me suelen desaparecer los widgets de texto, esto se da cuando el widget de texto (que puede incluir html) tiene alguna imagen del blog:

1
<img src="http://localhost/blog/example.jpg"/>

¿Por qué desaparecen los widgets?

Investigando un poco, vemos que wordpress almacena la información relativa a los text widgets serializada en la tabla wp_options, campo widget_text:

1
a:2:{i:2;a:3:{s:5:"title";s:4:"test";s:4:"text";s:46:"<img src='http://localhost/blog/example.jpg'/>";s:6:"filter";b:0;}s:12:"_multiwidget";i:1;}

Y mirando con más detalle, también vemos que wordpress almacena en un valor “s” la longitud de cada cadena, así vemos que para el campo “text” de este widget, tenemos un contenido de 46 caracteres.

1
s:4:"text";s:46:"<img src='http://localhost/blog/example.jpg'/>";

¿Qué es lo que sucede exactamente?

Pues que al migrar wordpress de una dominio a otro (o desde local), si realizas un search & replace para cambiar las rutas en el fichero .sql que has exportado, la ruta de la imagen también varía, cambiando con mucha probabilidad la longitud del contenido del text widget, al no coincidir esta longitud de text con la de su contenido real, wordpress no muestra los widgets de texto:

1
s:4:"text";s:46:"<img src='http://codebites.net/example.jpg'/>";

¿Cómo solucionarlo?

La verdad es que es algo tosco, concretamente lo que hago es contar la diferencia de caracteres entre una ruta y la otra e introducir el nuevo valor manualmente vía sql (o phpMyAdmin)

Otra posible solución es sustituir el valor del campo widget_text por el que tenias anteriormente a la migración en la nueva base de datos, y editar el contenido del widget de texto directamente desde el administrador.

El resultado en nuestro caso quedaría así:

1
a:2:{i:2;a:3:{s:5:"title";s:4:"test";s:4:"text";s:45:"<img src='http://codebites.net/example.jpg'/>";s:6:"filter";b:0;}s:12:"_multiwidget";i:1;}

Como ves, codebites.net tiene una longitud de 13 caracteres, mientras que localhost/blog tiene 14 caracteres, así que el valor de s:4:”text”;s:46, pasa a ser s:4:”text”;s:45

HTML5, validación de estándares: la etiqueta “object” para insertar Flash

2 mayo, 2012 Reply

Siguiendo el método de publicación estático propuesto por la genial librería swfobject, nos encontramos con el siguiente código de inserción de un swf(ejemplo):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360" id="flashVideo" name="flashVideo">
	<param name="movie" value="example.swf" />
	<param name="menu" value="false" />
	<param name="bgcolor" value="000000" />
<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="example.swf" width="640" height="360">
		<param name="menu" value="false" />
		<param name="wmode" value="opaque" />
		<param name="bgcolor" value="000000" />
<!--<![endif]-->
	<img src="alt_content.jpg" alt="alternative content" />
<!--[if !IE]>-->
	</object>
<!--<![endif]-->
</object>

Otra vez, las normas cambian con HTML5, y el código anterior nos devuelve los siguientes errores:

Element object is missing one or more of the following attributes: data, type.

The classid attribute on the object element is obsolete. Use the data and type attributes to invoke plugins. To set a parameter with the name classid, use the param element.

Como viene siendo habitual, los errores corresponden a la parte de object necesaria para la inserción en Internet Explorer, por suerte, basta con utilizar comentarios condicionales para solucionar el problema:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360" id="flashVideo" name="flashVideo">
	<param name="movie" value="example.swf" />
	<param name="menu" value="false" />
	<param name="bgcolor" value="000000" />
<![endif]-->
<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="example.swf" width="640" height="360">
		<param name="menu" value="false" />
		<param name="wmode" value="opaque" />
		<param name="bgcolor" value="000000" />
<!--<![endif]-->
	<img src="alt_content.jpg" alt="alternative content" />
<!--[if !IE]>-->
	</object>
<!--<![endif]-->
<!--[if IE]>
</object>
<![endif]-->

TED TALKS: Kevin Kelly sobre los próximos 5000 días de la “web”

30 abril, 2012 Reply

Soy un gran fan de TED TALKS! este video ya tiene unos cuantos años pero es uno de mis favoritos.

Kevin Kelly (nacido en 1952) es el fundador y director ejectuvo de la Revista Wired, puedes consultar su bio en wikipedia (en)

La cita:
“Creo que una de las cosas que estamos aprendiendo de esta era, de la última década, es que debemos mejorar en creer lo imposible”

El vídeo en ted.com: http://www.ted.com/talks/kevin_kelly_on_the_next_5_000_days_of_the_web.html

HTML5, validación de estándares: El atributo “rel”

30 abril, 2012 Reply

Es posible que si decides pasar a HTML5 te encuentres con que código que antes te validaba perfectamente en XHTML deje de hacerlo, así que he pensado en postear una serie de tips con los problemas que me encontré y su posible solución, hay que decir que HTML5 aún es un borrador y sigue en desarrollo, así que hay que pensar bien cuando utilizarlo, pero… ¿quién se puede resistir?

El atributo rel se utiliza en los enlaces y añade información sobre los mismos, los navegadores no utilizan este atributo, pero los buscadores pueden obtener más información sobre el enlace gracias al uso de rel.

Atención! en HTML5 se ha limitado el número de link types a utilizar, aquí la lista:

  • alternate
  • author
  • bookmark
  • help
  • icon
  • license
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • stylesheet
  • tag

Más información sobre los tipos disponibles en:
http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes