Diferencia entre revisiones de «JQuery Cascade»

De Dos Ideas.
Saltar a: navegación, buscar
(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.)
 
 
(No se muestran 14 ediciones intermedias de 4 usuarios)
Línea 1: Línea 1:
−
[[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.
+
[[Category:JQuery]]
 +
[[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 Modelos</h2>
 +
 +
        <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">
 +
$(function()
 +
{
 +
                  $("#comboModelos").cascade("#comboProductos",{
 +
ajax: {
 +
url: '/BusquedaDeModelosServlet',
 +
data: { myotherdata: jQuery("#ajax_header").html() }
 +
  },
 +
        template: commonTemplate,
 +
match: commonMatch 
 +
});
 +
});
 +
</script>
 +
 +
    </body>
 +
</html>
 +
</code>
 +
 
 +
Si bien todo es configurable, por defecto el formato del retorno de los datos en el servlet debe ser del estilo:
 +
<code>[{'When':'CODIGO','Value':'VALOR','Text':'DESCRIPCION'},{...},{...}]</code>
 +
 
 +
El atributo '''url''' indica la página que devolverá los datos (en el formato antes mencionado). JQuery Cascade enviará el parámetro '''val''' con la opción seleccionada del combo "padre" a esa URL. De esta manera, es posible crear una página dinámica para generar el contenido.
 +
 
 +
En [[Java]], la página del ejemplo anterior podría resolverse con un [[Servlet]]:
 +
 
 +
<code java>
 +
public class BusquedaDeModelosServlet 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);
 +
    }
 +
}
 +
</code>
 +
 
 +
==Ver también==
 +
* [[JQuery]]
 +
* [http://www.dosideas.com/descargas/category/1-jquery.html?download=9%3Ademo-de-jquery-cascade Descargar un proyecto de ejemplo de JQuery Cascade]
 +
* [http://plugins.jquery.com/project/cascade Pagina del plugin JQuery Cascade]

Revisión actual del 08:13 10 sep 2010

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">

$(function() { 

                  $("#comboModelos").cascade("#comboProductos",{

ajax: { url: '/BusquedaDeModelosServlet', data: { myotherdata: jQuery("#ajax_header").html() } }, template: commonTemplate, match: commonMatch }); }); </script> 

   </body>

</html>

Si bien todo es configurable, por defecto el formato del retorno de los datos en el servlet debe ser del estilo: [{'When':'CODIGO','Value':'VALOR','Text':'DESCRIPCION'},{...},{...}]

El atributo url indica la página que devolverá los datos (en el formato antes mencionado). JQuery Cascade enviará el parámetro val con la opción seleccionada del combo "padre" a esa URL. De esta manera, es posible crear una página dinámica para generar el contenido.

En Java, la página del ejemplo anterior podría resolverse con un Servlet:

public class BusquedaDeModelosServlet 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);
   }

}

Ver también

Obtenido de «https://dosideas.com/wiki/index.php?title=JQuery_Cascade&oldid=5473»