Diferencia entre revisiones de «JQuery Cascade»
| Línea 65: | Línea 65: | ||
El servlet que elijamos para buscar los datos, recibirá por parámetro con el nombre "val" el código del valor del combo elegido. | El servlet que elijamos para buscar los datos, recibirá por parámetro con el nombre "val" el código del valor del combo elegido. | ||
| − | <code> | + | <code java> |
public class MiServlet extends HttpServlet{ | public class MiServlet extends HttpServlet{ | ||
| − | + | /** | |
* Metodo que se llama al invocar al servlet | * Metodo que se llama al invocar al servlet | ||
*/ | */ | ||
| Línea 79: | Línea 79: | ||
String respuesta = "[{'When':'A','Value':'A1','Text':'Modelo A1'}, | String respuesta = "[{'When':'A','Value':'A1','Text':'Modelo A1'}, | ||
| − | + | {'When':'A','Value':'A2','Text':'Modelo A2'}]"; | |
//escribimos la respuesta | //escribimos la respuesta | ||
Revisión del 19:21 16 oct 2008
JQuery Cascade es un plugin para la librería JavaScript JQuery que permite cargar datos vía ajax ante un evento y luego asignar los mismos a cualquier elemento. Su uso mas común es en un combo Html SELECT.
Ejemplo
Suponer el caso mas común en donde debo cargar un combo SELECT de acuerdo al valor elegido en otro. Por ejemplo se tiene un combo con el tipo de producto y en el otro aparecen los modelos de ese producto. Debemos indicarle el combo origen, el destino y la URL de donde obtener los datos.
<html>
<head>
<script type="text/javascript" src="/resources/jquery/jquery.js"></script>
<script type="text/javascript" src="/resources/jquery/jquery.cascade.js"></script>
<script type="text/javascript" src="/resources/jquery/jquery.cascade.ext.js"></script>
<script type="text/javascript">
function commonTemplate(item) {
return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonTemplate2(item) { return "<option value='" + item.Value + "'>***" + item.Text + "***</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; };
</script>
<style type="text/css">
.cascade-loading{ background: transparent url("indicator.gif") no-repeat center;
}
</style>
</head> <body>
Consulta Modelos
<label>Productos
<select id="comboProductos"> <option value="A">Producto A</option> <option value="B">Producto B</option> <option value="C">Producto C</option> <option value="D">Producto D</option> </select> </label> <label>Modelos <select id="comboModelos"> </select> </label>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#comboModelos").cascade("#comboProductos",{
ajax: { url: '.../miServlet.do', data: { myotherdata: jQuery("#ajax_header").html() } }, template: commonTemplate, match: commonMatch }); }); </script>
</body>
</html>
Si bien todo es con figurable, por defecto el formato del retorno de los datos en el servlet debe ser del estilo: [{'When':'CODIGO','Value':'VALOR','Text':'DESCRIPCION'},{...},{...}]
El servlet que elijamos para buscar los datos, recibirá por parámetro con el nombre "val" el código del valor del combo elegido.
public class MiServlet extends HttpServlet{
/**
* Metodo que se llama al invocar al servlet
*/
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String codigoProducto = request.getParameter("val");
//TODO buscar los modelos segun el producto. Luego armar una respuesta del tipo:
String respuesta = "[{'When':'A','Value':'A1','Text':'Modelo A1'},
{'When':'A','Value':'A2','Text':'Modelo A2'}]";
//escribimos la respuesta
response.getWriter().write(respuesta);
}
}
