Tutti-Frutti » Blog Archives

Tag Archives: JQuery

Diferencias entre las funciones parent() y closest() de jQuery

Supongo que mientras han estado programando con jQuery, al menos una vez, les ha tocado tener que recurrir a un elemento padre de un formulario o una estructura DOM. Es decir, por ejemplo, se hace clic en un elemento “a” y necesitan saber dentro de que celda de una tabla se encuentra ese elemento.

Para esto, jQuery tiene más de una función, por este motivo, surge la duda cuál utilizar en determinado momento. Por supuesto, la elección depende del contexto y la situación particular.

Las posibles funciones son tres:

Continue reading

Published by:

BxSlider – jQuery Content Slider

BxSlider es un plugin jQuery, que permite insertar contenido desplazable, adaptándose a cualquier tipo de dispositivo, ya sea pc, portátil, móvil, tablet, ipad, etc.

Características:

  • Permite transición vertical y horizontal
  • Las diapositivas pueden contener imágenes, videos o contenido HTML
  • Soporta manejo touch

Continue reading

Published by:

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:

JQuery UI Dialog sin botón Cerrar

El objeto Dialog de JQuery UI es una opción muy útil para presentar mensajes o formularios de manera modal, por encima de la página actual. Por supuesto que el uso lo determinan Uds…

En este caso, les voy a presentar la solución que usé, para evitar que salga el botón cerrar (con forma de X) en la parte superior derecha de la ventana de diálogo. Como se puede apreciar en la imagen que encabeza esta entrada.

open: function(event, ui) { $(this).parent().find(".ui-dialog-titlebar-close").remove(); },
closeOnEscape: false

Aquí les dejo un ejemplo completo, por si lo necesitan.

$("#divDialogo").dialog({
   autoOpen: false,
   resizable: false,
   height: 415,
   width: 405,
   modal: true,
   open: function(event, ui) { $(this).parent().find(".ui-dialog-titlebar-close").remove(); },
   buttons: {
      "Guardar": function() {...},
      "Cancelar": function(){$(this).dialog("close");}
 },
   closeOnEscape: false
 });
Published by:

JQuery UI datepiker

A la hora de agregar un objeto de fecha en un formulario dentro de una página web, el datepiker de JQuery UI es una buena opción. Sencilo de configurar, pero con algunas inconsistencias, que paso a describir para tener a mano.

Una de las opciones que integra, es establecer la fecha mínima, la máxima y el rango de años. Pero es necesario saber que si no se establece este último, la lista desplegable de los años, solo mostrará 10 años, y hay que elegir el último (o primero de la lista) para ver 10 años más.

Continue reading

Published by: