Diferencia entre revisiones de «JQuery Cascade»
(Página nueva: JQuery Cascade es un plugin para la librería JavaScript JQuery que permite cargar datos via ajax ante un evento y luego asignar los mismos a cualquier elemento.) |
|||
| Línea 1: | Línea 1: | ||
| − | [[JQuery Cascade]] es un plugin para la librería [[JavaScript]] [[JQuery]] que permite cargar datos | + | [[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. | ||
| + | |||
| + | <code html4strict> | ||
| + | <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> | ||
| + | <h2>Consulta de Invasores</h2> | ||
| + | |||
| + | <form id="formBusqueda" action="procesarConsulta.jsp"> | ||
| + | <input type="text" name="consulta" /> | ||
| + | <input type="submit" value="Buscar" /> | ||
| + | </form> | ||
| + | |||
| + | <div id="resultados"></div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | </code> | ||
| + | |||
| + | Si bien todo es con figurable, por defecto el formato del retorno de los datos debe ser del estilo: <nowiki>[{'When':'CODIGO','Value':'VALOR','Text':'DESCRIPCION'},{...},{...}]</nowiki> | ||
| + | |||
| + | El servlet que elijamos para buscar los datos, recibirá por parámetro con el nombre "val" el código del valor del combo elegido. | ||
Revisión del 18:50 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 de Invasores
<form id="formBusqueda" action="procesarConsulta.jsp">
<input type="text" name="consulta" />
<input type="submit" value="Buscar" />
</form>
</body>
</html>
Si bien todo es con figurable, por defecto el formato del retorno de los datos 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.
