Tutti-Frutti » 6 febrero, 2014

Daily Archives: 6 febrero, 2014

JQuery UI Dialog se quita del formulario

Una ventana de diálogo de JQuery UI tiene la propiedad de ser modal (o no), lo que indica que es un objeto que se encuentra sobre todos los demás elementos de la misma aplicación, hasta que se cierra o se abre otro objeto.

Una característica que es muy útil, cuando queremos que el usuario interactúe con este objeto y no con el resto de la página.

Pero debido a la manera en que está implementada esta propiedad, genera un inconveniente que paso a explicar. Al crearse el objeto Dialog, se genera una capa (div), llamemosle «a», al final de la página, hacia donde se mueve el Dialog (div también «b») quitandolo de la ubicación original. De esta manera, al mostrarse en formato modal, la capa «a» ocupa toda la pantalla, y queda por debajo del Dialog. La función es «tapar» el resto de la página, para quitarle interactividad.

Por lo que si teníamos a «b» dentro de un formulario (form), dejará de estarlo, y al hacer submit, no se enviarán los datos que se encuentra en los input del Dialog.

Les muestro esta situación en código, aquí el form con el div «b».

<form name="form1" method="post" action="">
...
<div id="divDialogo">...</div>
</form>

Y así queda una vez que indicamos a JQuery que la div «b» es un dialog:

<form name="form1" method="post" action="">
...
</form>
<div class="ui-dialog ui-widget ...">
<div class="ui-dialog-titlebar ...">...</div>
<div id="divDialogo">...</div>
</div>

¿De qué manera solucionamos este problema? Bueno, hay varias alternativas, acá les describiré las que encontré buscando subsanar el inconveniente.

1) El formulario dentro del div «b», no es útil en determinadas situaciones, pero en otras es una solcuión sencilla. Ojo! no puede haber un form dentro de otro porque no tendrá el comportamiento esperado.
HTML

<div id="divDialogo">
<form name="form1" method="post" action="">
...
</form>
</div>

2) Dejarlo como está, y en el evento «close» del Dialog, pasar los valores de los input a objetos «hidden» que se encuentren dentro del formulario.
HTML

<form name="form1" method="post" action="">
   <input type="hidden" name="hidX" id="inpHiddenX" value="" />
...
</form>
<div class="ui-dialog ui-widget ...">
<div class="ui-dialog-titlebar ...">...</div>
<div id="divDialogo">
   <input type="text" name="txtX" id="inpTextX" value="" />
</div>
</div>

JavaScript

$("#divDialogo").dialog({
   height: 415,
   width: 405,
   modal: true,
   close: function() { $("#inpHiddenX").val($("#inpTextX").val()); },
   buttons: {
      "Guardar": function() {...},
      "Cancelar": function() {$(this).dialog("close");}
 });

3) Que el Dialog no sea modal, y moverlo a su lugar de origen luego de inicializarlo.
JavaScript

$("#divDialogo").dialog({...});
$("#divDialogo").parent().appendTo($("#divDialogo").parents("form"));
Published by:

Cómo ayudar en la lucha contra el cáncer con un videojuego

Me encantan los programas de doble utilidad, o como en este caso, que a través de un juego, cualquier persona pueda contribuir con la ciencia y tecnología. Lo presentó un centro de investigación médica; permite a los usuarios, sin pensarlo, hacer análisis de datos biomédicos mientras juegan.

El 4 de febrero fue el Día Mundial de Lucha contra el Cáncer . Y la organización Cancer Research de Inglaterra presentó Play to Cure: Genes in Space, un videojuego gratis para teléfonos móviles (Android o el iPhone) que permite, jugando, ayudar a encontrar las fallas genéticas que permiten al cáncer crecer y desarrollarse.

Según le dijo Hannah Keartland, de Cancer Research, ese camino lleno de obstáculos es, en realidad, la representación de información genética obtenida por el análisis del ADN de múltiples tumores cancerígenos. Cada vez que el usuario cambia el curso de la nave buscando el elemento Alfa revela patrones que sirven como análisis de diversas variaciones de material genético. Varios jugadores pasan por el mismo terreno, eligiendo el camino más eficiente; esa información es enviada por el juego en forma anónima a esa institución.

Para más información, visita Play to Cure: Genes in Space; o revisa la nota completa en el link de la fuente.

Fuente: Cómo ayudar en la lucha contra el cáncer con un videojuego de naves espaciales – lanacion.com

Published by: