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: Federico Mancinelli
