En este post, se muestra como llenar los valores de un select simple o múltiple en una vista jsp --> (html).
Nuestro proyecto consta de los siguientes elementos
En index.jsp, iniciamos colocando 2 select (para editorial y para área)
Ahora, mostraremos como cargar los select con los datos que se encuentran en las tablas "area" y "editorial" respectivamente.
De la imagen anterior, se puede apreciar como se incorporan jequery.min.js y utezSelectX.js
utezSelect.js contiene una función llamada cargarSelectX (que espera el nombre de un Servlet), en este caso el Servlet se llama Opciones, el cuál se encarga de recuperar los valores y las opciones de cada opción que tendrá el select.
...
$('#editorial').cargarSelectX("Opciones");
$('#area').cargarSelectX("Opciones");
.....
Como se puede apreciar en la imagen anterior, ya se cuenta con las opciones en nuestros select (cada opción ha sido recuperada de nuestra bd en las tablas "editorial" y "area" respectivamente).
Ahora es conveniente aplicar un filtro, para que el usuario pueda insertar un término de búsqueda y encuentre rápidamente la opción que quiera elegir, en lugar de desplazarse por todas las opciones hasta encontrar la que requiere.
Basta con agregar las líneas 24 a 33 que se ven en la imagen anterior.
La llamada al método combobox(), es la que aplica el filtro.
...
$( "#editorial" ).combobox();$( "#area" ).combobox();.....
Selección múltiple
Además de jquery, necesitamos: tokeninput.js, token-input.css y token-input-facebook.css
En este caso se trata de un input, en lugar de un select (con un comportamiento semejante).
Se aplica tokenInput() al elemento cuyo id=autores ("#autores")
Enviando el URL, que en este caso es el recurso llamado "Opciones" (ver línea 22 de la siguiente imagen)
Además de 3 configuraciones:
Línea 23, establece el tema, recuperado de token-input-facebook.css
Línea 24, no permite seleccionar opciones duplicadas.
Línea 25, la traducción al español de la solicitud del filtro.
Como se puede apreciar en la primera imgen, el filtro no funciona del todo bien. Se resulve esperando el parámetro "q" (el valor del filtro) en el Servlet Opciones:
Bean
(ver línea 18 de UtezSelectX.js)
Código fuente del Bean, en el código fuente puede ver que se implementa a Serializable el morivo lo puede consultar aquí.
DAO
En la línea 26, se realiza una consulta (query, que se recibe como parámetro en la declaración del método consultar) y el resutado (ResultSet) es asignado a la variable rs.
De la línea 28 a 33, se encuentra el ciclo while que itera el resultado (rs), en cada recorrido crea un SelectBean y le asigna el id y name. Al final de cada iteración (línea 32) añade el SelectBean a la lista.
Las instrucciones 28 a 33 están "encerradas" en el bloque try-catch para "capturar/controlar" en caso de ocurrir una excepción SQLException.
Finalmente, la lista es "retornada" (ver línea 38).
Opciones
Sea petición Get o Post, se atiende en el método processRequest.
Recordemos que de request se obtienen los parámetros del cliente (navegador web) y desde response puede responder el Servlet.
Línea 40, realizamos una composición de Gson() (puedes obtener el código fuente desde code.google.com), gson nos permitirá convertir fácilmente una lista, llama opciones de elementos SelectBean, a su representación en formato JSON.
En la línea 43, recuperamos el parámetro "q", el cuál pudiera existir o no, por ello en la línea 44, en caso de que la variable "q" tenga el valor de "nulo" o una cadena de texto sin contenido, declaramos "q" con el valor de cadena de texto vacía (línea 45).
Línea 46, obtenemos el parámetro "paramName" que contiene el valor del id del select (ver UtezSelectX.js en línea 14).
Línea 48 a 52, si y sólo si selectX es diferente de null, se revisa si ésta tiene el valor de "editorial" o "area" y asigna a la variable query la instrucción de la consulta sql.
Línea 56, contando con la consulta en la variable query, se llama al método consultar del dao (SelectDao), el resultado, que es una lista de elementos SelectBean, se asigna a a variable opciones (lista declarada en la línea 41).
Un filtro en un select múltiple con el término "ed" produce 3 registros, entonces la lista
es de 3 elementos, cuya representación JSON es:
[{"name":"Edward Punset","id":"18"},{"name":"Pat Fallon y Fred Senn","id":"19"},{"name":"Salvat Editores","id":"24"}]
Línea 60, desde response, se establece el contentType que en este caso es "application/json"
Línea 61, se responde escribiendo el valor de json.
(ver línea 15 y 17 de UtezSelectX.js)
Código fuente de Opciones
UtezSelectX
Métodos importantes, utilizados.
$.get(URL,data,function(data,status,xhr),dataType)
$.get(URL,data,function(data))
línea 13: URL=servlet
línea 14: data= { paramName : $(this).attr("id") }
línea 14: data= { paramName : $(this).attr("id") }
línea 15: function(data) = function(jsonResponse) {
a 20: ...
}
Lo que resulta en:
En la línea 11, se declara la función llamada cargarSelectX que recibirá un argumento llamado servlet
Línea 12, se podrá utilizar la variable select o hacer referencia this para referirse al select (elemento html) que se le aplique la función caragarSelectX
Línea 13, inicia el uso de get con el formato $.get(URL,data,function(data))
el URL es el valor que se recibe como argumento llamado servlet (ver línea 11)
$.get(servlet, {
Línea 14, el valor de data, en este caso, se recupera el valor del atributo id del select en cuestión y tal valor se asigna a paramName, parámetro que recibe el servlet. $.get(URL,data,function(data))
Línea 15, inicia la función function(data,status,xhr), pero sólo utilizando el tipo function(data), en este caso: function(jsonResponse)
el contenido de tal función sólo tiene dos intrucciones (que terminan con "punto y coma")
Línea 16, encuentra(find) todas las opciones y las elimina (opciones/option´s del select en cuestión).
Línea 17, se utiliza each() para recorrer los los elementos de la lista (representada en JSON) que devuelve el servlet,
Línea 18, de cada elemento, de jsonResponse, el valor (value) es un objeto que contiene id y name (de acuerdo con SelectBean), dichos atributos se utilizan para ir agregando (append) opciones al select en cuestión.
Información importante:
En algunos casos es conveniente determinar si la carga de las opciones en el select será bajo transmisión asíncrona o no.
En resumen, se eliminan las opciones del select (línea 16), se recupera una lista (de elementos SelectBean) convertida a JSON (esta lista la crea y devuelve el servlet), para cada elemento de la lista se recupera el valor que es un objeto con el atributo id y name, los cuales se utilizan para ir agregando (append) opciones al select (ver línea 18).
En la línea 11, se declara la función llamada cargarSelectX que recibirá un argumento llamado servlet
Línea 12, se podrá utilizar la variable select o hacer referencia this para referirse al select (elemento html) que se le aplique la función caragarSelectX
Línea 13, inicia el uso de get con el formato $.get(URL,data,function(data))
el URL es el valor que se recibe como argumento llamado servlet (ver línea 11)
$.get(servlet, {
Línea 14, el valor de data, en este caso, se recupera el valor del atributo id del select en cuestión y tal valor se asigna a paramName, parámetro que recibe el servlet. $.get(URL,data,function(data))
Línea 15, inicia la función function(data,status,xhr), pero sólo utilizando el tipo function(data), en este caso: function(jsonResponse)
el contenido de tal función sólo tiene dos intrucciones (que terminan con "punto y coma")
Línea 16, encuentra(find) todas las opciones y las elimina (opciones/option´s del select en cuestión).
Línea 17, se utiliza each() para recorrer los los elementos de la lista (representada en JSON) que devuelve el servlet,
Línea 18, de cada elemento, de jsonResponse, el valor (value) es un objeto que contiene id y name (de acuerdo con SelectBean), dichos atributos se utilizan para ir agregando (append) opciones al select en cuestión.
Información importante:
En algunos casos es conveniente determinar si la carga de las opciones en el select será bajo transmisión asíncrona o no.
se puede encontrar un ejemplo aquí
Recomendamos utilizar el código de la imagen anterior, para cargar las opciones de un select y sólo hasta terminar de cargar las opciones proceder a seleccionar automáticamente una opción del mismo select, esto se da muy a menudo en una interfaz para modificar un registro.
Por ejemplo, cargar todos los países y seleccionar por default a México.
En resumen, se eliminan las opciones del select (línea 16), se recupera una lista (de elementos SelectBean) convertida a JSON (esta lista la crea y devuelve el servlet), para cada elemento de la lista se recupera el valor que es un objeto con el atributo id y name, los cuales se utilizan para ir agregando (append) opciones al select (ver línea 18).
BD
Puede ver el post Reconstruir proyecto NetBeans para crear un proyecto Netbeans a partir del código fuente disponible.
No hay comentarios.:
Publicar un comentario