lunedì 7 maggio 2012

Jquery caricamento combo dinamiche via ajax


Prendiamo un esempio classico, quello delle combo Regione-Provincia-Comune da attivarsi in sequenza tramite chiamata Ajax.
La chiamata Ajax attivata all'onchange della combo regione carica le province di quella regione scelta, mentre quella attivata all'onchange della provincia chiama i comuni di quella provincia.
Le chiamate Ajax tornano i risultati sotto forma di Xml, e tale xml è poi parsato lato jQuery per aggiornare la combo di interesse.

Di seguito il codice della jsp utilizzata:

<%@page import="it.gestore.Regione"%>
<
%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
 $('#ddlRegione').change(function() {
  $.ajax({
         type: "GET",
      url: "CaricaProvince",
      data: "ddlRegione="+document.getElementById('ddlRegione').value,
      dataType: "xml",
      success: function(xml) {
       var select=document.getElementById("ddlProvincia");
       if ( select ){

       while ( select.length > 1  )
       {
         select.remove(1);
         }
    }
       var select2=document.getElementById("ddlComune");
       if ( select2 ){

       while ( select2.length > 1  )
       {
         select2.remove(1);
         }
    }
       $(xml).find('elemento').each(function(){
      
     var value = $(this).find('codice').text();
     var text = $(this).find('descrizione').text();
   
     var select=document.getElementById("ddlProvincia");
    
     var option = document.createElement('option');
    
                option.text = text;
                option.value = value;
              
                try
                {
                
                  select.add(option, null);
                }
                catch(ex)
                {
               
                  select.add(option);
                }
     });
 
  }
 });
  })
  $('#ddlProvincia').change(function() {
   $.ajax({
          type: "GET",
       url: "CaricaComuni",
       data: "ddlProvincia="+document.getElementById('ddlProvincia').value,
       dataType: "xml",
       success: function(xml) {
        var select=document.getElementById("ddlComune");
      
        if ( select ){

        while ( select.length > 1  )
        {
          select.remove(1);
          }
     }
        $(xml).find('elemento').each(function(){
       
      var value = $(this).find('codice').text();
      var text = $(this).find('descrizione').text();
    
      var select=document.getElementById("ddlComune");
     
      var option = document.createElement('option');
     
                 option.text = text;
                 option.value = value;
               
                 try
                 {
                 
                   select.add(option, null); // standards compliant; doesn't work in IE
                 }
                 catch(ex)
                 {
                
                   select.add(option); // IE only
                 }
      });
  
   }
  });
   })
 
 
 
 
 
  });


</script>
</head>
<body>
<form action="Carica">
<table>
<tr>
<td>Regioni: </td>
<td>
<select name="ddlRegione" id="ddlRegione">
<option value="">--</option>
<%
List<Regione> lista=(List<Regione>)getServletContext().getAttribute("listaRegioni");

for(int i=0;i<lista.size();i++) {
 Regione r=lista.get(i);
%>
<option value="<%=r.getDescrizione()%>"><%=r.getDescrizione() %></option>
<%} %>

</select>
</td>
</tr>
<tr>
<td>Provincia: </td>
<td><select name="ddlProvincia" id="ddlProvincia">
<option value="">--</option>
</td>
</tr>
<tr>
<td>Comune: </td>
<td><select name="ddlComune" id="ddlComune">
<option value="">--</option>
</td>
</tr>
</table>
</form>
</body>
</html>



Lato JQuery sono richiamate delle semplici servlet che interrogano un ejb esterno e restituiscono i dati sotto forma di xml. Di seguito il codice della servlet CaricaProvince (il codice della CaricaComune è analogo)

package it.servlet;
import it.gestore.ComuneDao;
import it.gestore.Provincia;
import it.gestore.Regione;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Properties;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.*;
/**
 * Servlet implementation class CaricaProvince
 */
public class CaricaProvince extends HttpServlet {
 private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CaricaProvince() {
        super();
        // TODO Auto-generated constructor stub
    }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response);
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  try
  {
   PrintWriter out = response.getWriter();
   String regione=request.getParameter("ddlRegione");
   response.setContentType("text/xml");
   response.setHeader("Cache-Control", "no-cache");
   ComuneDao c=getEjb();
   Regione r=c.getRegioneByName(regione);
   List<Provincia> listaProvince=c.getProvinceByRegione(r);
   out.println( messaggioXml(listaProvince) );
   out.close();
  
  }
  catch(Exception ex){
  
  }
 }
 private String messaggioXml(List<Provincia> province){
  StringBuffer sb=new StringBuffer();
  sb.append("<elementi>");
  for(Provincia p:province){
   sb.append("<elemento>");
   sb.append("<codice>");
   sb.append(p.getIdProvincia());
   sb.append("</codice>");
   sb.append("<descrizione>");
   sb.append(p.getNomeProvincia());
   sb.append("</descrizione>");
   sb.append("</elemento>");
  }
  sb.append("</elementi>");
  return sb.toString();
 }
    private ComuneDao getEjb() throws Exception
    {
     Properties p=new Properties();
        p.put(Context.INITIAL_CONTEXT_FACTORY, "org.jnp.interfaces.NamingContextFactory");
        p.put(Context.URL_PKG_PREFIXES, "org.jboss.naming:org.jnp.interfaces");
        p.put(Context.PROVIDER_URL, "jnp://127.0.0.1:1099");
        Context ctx=new InitialContext(p);
        ComuneDao c=(ComuneDao) ctx.lookup("ComuneEjb/remote");
        return c;
    }
}


Nessun commento:

Posta un commento