Visualizzazione post con etichetta JQUERY. Mostra tutti i post
Visualizzazione post con etichetta JQUERY. Mostra tutti i post

domenica 4 maggio 2014

Caricamento Combo via Ajax tramite Json

Spesso capita di dover effettuare evolutive/manutenzioni su progetti vecchi, realizzati ad esempio Struts 1.3.
Qui metto un esempio di una classica combo a cascata (provincia comune) realizzata utilizzando Ajax e Json.
Ho utilizzato la libreria json-simple-1.1.1.jar per la creazione dell'oggetto Json lista dei comuni italiani ottenuto filtrando per provincia.
Come framework Javascript ho utilizzato Jquery versione 1.7.2.

JSP

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
<script>
//js function per caricare via ajax i comuni
function caricaComboComuni(){
 $("#loading").show();
  $("#loaded").hide();
 $.ajax({
   url: "caricaComune.do?cdProv="+document.getElementById("cdProv").value,
   dataType: "json",
   success:
    function (data){
    $("select#idComuni option").remove();
    $("#loading").hide();
    $("#loaded").show();
         $.each(data.listaComuni, function(key, val){
          $("select#idComuni").append('<option value="' + val.codice + '">' + val.descrizione + '</option>');
         })
       ;
    },
    error:  function (data){
     alert(data);
     }
  })
}

</script>
</head>
<body>
<html:form action="/goToHello">
<html:select property="descrizione" styleId="cdProv" onchange="caricaComboComuni()" >
<html:optionsCollection  property="listaDati" label="descrizione" value="codice" />
</html:select>
<br/>
<div id="loading" style="display:none;"> 
<img src="img/ajax-loader.gif"/>
 </div>
 <div id="loaded">
<html:select property="comune" styleId="idComuni"></html:select>
</div>
<br/>
<input type="submit" value="go" />
</html:form>
</body>
</html>


ACTION

package it.action;
import it.beans.ComuneBean;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
public class SelectComune extends Action {
 public static JSONObject getJsonFromMyFormObject(List<ComuneBean> form)
   {
     JSONObject responseDetailsJson = new JSONObject();
     JSONArray jsonArray = new JSONArray();

     for (int i = 0; i < form.size(); i++)
     {
       JSONObject formDetailsJson = new JSONObject();
       formDetailsJson.put("codice", form.get(i).getCodice()+"-"+form.get(i).getDescrizione());
       formDetailsJson.put("descrizione", form.get(i).getDescrizione());
       jsonArray.add(formDetailsJson);
     }
     responseDetailsJson.put("listaComuni", jsonArray);
     return responseDetailsJson;
   }
 
 
 
 
 public ActionForward execute(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response)throws Exception
    {
     String codiceProv=request.getParameter("cdProv");
     List<ComuneBean> listaComuni=getComuneByProv(codiceProv);
     PrintWriter out = response.getWriter();
  out.write(getJsonFromMyFormObject(listaComuni).toJSONString());
   out.close();
  return null;
    }
 
 private List<ComuneBean> getComuneByProv(String codProv) throws Exception{
  String query="SELECT cd_catastale,descrizione FROM S_COMUNE where PROVINCIA_ID=? order by DESCRIZIONE";
  List<ComuneBean> l=new ArrayList<ComuneBean>();
  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
  Connection conn=DriverManager.getConnection("jdbc:odbc:mydb","test","test");
  PreparedStatement pst=conn.prepareStatement(query);
  pst.setString(1, codProv);
  ResultSet rs=pst.executeQuery();
  while(rs.next()){
   ComuneBean c=new ComuneBean();
   c.setCodice(rs.getString("cd_catastale"));
   c.setDescrizione(rs.getString("descrizione").trim());
   l.add(c);
  }
  //Thread.sleep(3000);
  rs.close();
  pst.close();
  conn.close();
  return l;
 }

}


 

mercoledì 21 agosto 2013

Jquery accedere ad una cella di una tabella

Per accedere al contenuto di una cella di una tabella html e ad esempio effettuare un test sul valore presente in una certa posizione si può fare così:


var a=$("#datiB").find("tr:eq(1)").find("td:eq(2)").html().substring(2,3);



In questo caso stiamo assegnando alla variabile a la stringa di testo presa dalla tabella con id datiB, nella seconda riga e nella terza colonna. Del valore presente nella stringa interna prendiamo il 3 carattere.

martedì 12 marzo 2013

Jquery disabilitare tasto backspace con filtro su campi testo

Con il seguente script jquery (testato su IE8 e firefox 19) è possibile fare in modo che sia disabilitato il tasto back space per tutti i componenti tranne che per le input type="text" (in questo caso infatti il backspace ci è utile per cancellare eventuali refusi ortografici):


 $(document).keydown(function(e) {
 if (e.keyCode == 8  && e.target!="[object HTMLInputElement]" ) {
   return false;
  };
           
        };
        
    });


martedì 5 marzo 2013

Jquery show hide div


Con Jquery sono disponibili due comode funzione che si occupano di realizzare lo show/hide dinamico di un div:
  • La funzione toggle;
  • La funzione slideToggle che da un effetto "slide" all'animazione.
Di seguito un esempio

Codice javascript



function toggleDiv(divId) {
   $("#"+divId).slideToggle("slow");
   var v=$("#linkGuida").text();
  
   if(v=="Guida on-line"){
    $("#linkGuida").html("Nascondi guida on-line");
    }
   else
    {
    $("#linkGuida").html("Guida on-line");
    }
}



Codice html


<br/>
<a href="javascript:toggleDiv('qwerty');"   ><span id="linkGuida">Guida on-line</span></a>
<br/>
<div id="qwerty" style="display:none">
<fieldset>
<legend>
Nomenclatura 
</legend>
<ul>
  <li><b>BOT:</b> Buono ordinario del tesoro</li>
  <li><b>BTP:</b> Buono del tesoro pluriennale</li>
  <li><b>CTZ:</b> Obbligazione del tipo Zero Coupon (solo maxicedola finale)</li>
</ul>
</fieldset>

</div>
 

Vediamo l'esempio all'opera (cliccare sul link 'Guida on line')

Guida on-line

mercoledì 27 febbraio 2013

Jquery disabilitare pressione tasto backspace

Per disabilitarlo in tutte le pagine web basta includere nella pagina padre il seguente script (testato e funzionante su IE8 e Firefox 19).
Il return false fa si che l'evento non sia portato a termine, il metodo preventDefault evita invece che comunque venga eseguita la propagazione all'evento successivo.


$(document).keydown(function(e) {
        
        if (e.keyCode == 8 ) {
                                      e.preventDefault(); 
                                    return false;
        };
        
    });



venerdì 1 febbraio 2013

JQuery Date Picker range date e default

Utilizzando il calendario di jquery ho avuto la necessità di:
  • Rendere selezionabili le date dal 1970 al 2024;
  • Presentare all'apparire del calendario di default mese e anno odierno.
  • Poter selezionare da combo mese e anno per velocizzare lo spostamento tra date.
Con Jquery è tutto molto semplice (vedi anche questo precedente post ),l'unica piccola complicazione è data dal fatto che il formato delle date in jquery è diverso da quello utilizzato da Java.
In questo caso si noti come il formato jquery "dd/mm/yy" sia equivalente a quello Java "dd/MM/yyyy"
La lista dei formati usati da jquery si trova qui.

Di seguito la jsp :


<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ 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 lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
dateFormat: "dd/mm/yy",
changeYear: true,
yearRange: "1970:2024",
defaultDate: "<%=new SimpleDateFormat("dd/MM/yyyy").format(new Date())%>"
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>


sabato 26 gennaio 2013

Calendario con visualizzazione solo dei mesi

Ho avuto questa richiesta da parte di un cliente.
Visualizzare una coppia di date (Data da e Data a) sotto forma di calendario con la possibilità di scegliere esclusivamente il mese.
Oltre a questo il requisito prevedeva anche di impostare per il campo Data da il primo giorno del mese mentre per il campo Data a la fine del mese.
Speravo e credevo di trovare molte librerie javascript che facessero al caso mio e invece ne ho trovata soltanto una, la

jQuery.mtz.monthpicker

  disponibile qui
Un grazie all'autore, Luciano Costa!!

La libreria si appoggia a jquery, ed importa i 3 seguenti js (tutte scaricabili dall'url sopra linkata):

  •  jquery.min.js (versione 1.7.2);
  • jquery-ui.min.js (versione 1.8.18);
  • jquery.mtz.monthpicker.js .

Occorre anche importare una libreria di css, il jqueri-ui css framework 1.8.18.

Ho dovuto soltanto modificare lievemente la libreria jquery.mtz.monthpicker.js , per aggiungere una validazione che scrivesse la data da e data a secondo quanto richiesto. La versione di default infatti si limita  a scrivere mm/aaaa, a me invece serviva la data per esteso.
Ho aggiunto la mia funzione (chiamata checkData()) di formattazione nel metodo della libreria associato al click sull'elemento del calendario.

container.find('.mtz-monthpicker-month').bind('click', function () {
             
                var m = parseInt($(this).data('month'));
                if ($.inArray(m, settings.disabledMonths) < 0 ) {
                    settings.selectedMonth = $(this).data('month');
                    settings.selectedMonthName = $(this).text();
                    monthpicker.trigger('monthpicker-click-month', $(this).data('month'));
                    checkData();
                }
            });


La funzione checkData è la seguente:

function checkData(){
     var dataDa=document.getElementById("dataDa").value;
     if(dataDa.length==7){
     var dataDaFormattata="01/"+dataDa.substring(0);
     document.getElementById("dataDa").value=dataDaFormattata;
     }
     else
     {
      document.getElementById("dataDa").value="01"+dataDa.substring(2);
     }
     var dataA=document.getElementById("dataA").value;
     var mese="01";
     var anno="0000";
    if (dataA.length == 7) {
   mese = dataA.substring(0, 2);
   anno = dataA.substring(3, 7);
  } else {
    mese=dataA.substring(3,5);
    anno=dataA.substring(6,10);
  }
     var giorno='01';
     if(mese=='04' || mese=='06' || mese=='09' || mese=='11'){
      
      giorno='30';
     }
     else if(mese=='02'){
      if(isleap(anno)==true){
       giorno='29';
      }
      else
       {
      giorno='28';
       }
     }
     else
      {
        giorno='31';
      }
     
     document.getElementById("dataA").value=giorno+"/"+mese+"/"+anno;
    }

    function isleap(year)
    {
     var yr=year;
     if ((parseInt(yr)%4) == 0)
     {
      if (parseInt(yr)%100 == 0)
      {
        if (parseInt(yr)%400 != 0)
        {
      
        return false;
        }
        if (parseInt(yr)%400 == 0)
        {
       
        return true;
        }
      }
      if (parseInt(yr)%100 != 0)
      {
      
        return true;
      }
     }
     if ((parseInt(yr)%4) != 0)
     {
       
        return false;
     } 
    }


Un'ultima particolarità è che le due date devono essere precaricate con un valore che gli arriva dalla sessione e quindi ogni data ha una sua lista di caricamento diversa.
Ecco la jsp:

<%@ 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>Test sulle date</title>
  <script src='js/jquery.min.js'></script> 
    <script src='js/jquery-ui.min.js'></script>
    <script type="text/javascript" src="js/jquery.mtz.monthpicker.js"></script>
    <link rel='stylesheet' href='css/jquery-ui.css'>
</head>

  <style type="text/css">
      td.mtz-monthpicker-month {
        text-align:center;
      }
      select.mtz-monthpicker:focus {
        outline: none;
      }
    </style>
<body>
<%
   String dataDa=(String)request.getSession().getAttribute("DATA_DA");
   String dataA=(String)request.getSession().getAttribute("DATA_A");
%>
<table align="center">
<tr>
<td>
Data da:
</td>
<td>
<input id="dataDa" class="mtz-monthpicker-widgetcontainer" value="<%=dataDa %>" readonly="readonly" type="text">
<img border="0"  src="images/calendar.gif" onclick="javascript:document.getElementById('dataDa').focus();" >
</td>
<td>Data a: </td>
<td>
<input id="dataA" class="mtz-monthpicker-widgetcontainer" value="<%=dataA%>" readonly="readonly" type="text">
<img border="0"  src="images/calendar.gif" onclick="javascript:document.getElementById('dataA').focus();">
</td>
</tr>
</table>

<script>
optionsDa = {
    pattern: 'mm/yyyy', 
    selectedYear: <%=Integer.parseInt((String)request.getSession().getAttribute("ANNO_DA"))%>,
    startYear: 2008,
    finalYear: 2050,
    monthNames: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
};
optionsA = {
     pattern: 'mm/yyyy', 
     selectedYear: <%=Integer.parseInt((String)request.getSession().getAttribute("ANNO_A"))%>,
     startYear: 2008,
     finalYear: 2050,
     monthNames: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
 };
$('#dataDa').monthpicker(optionsDa);
$('#dataA').monthpicker(optionsA);
</script>
</body>
</html>


sabato 6 ottobre 2012

Autocomplete con Jquery


In questo post vediamo come effettuare un autocompletamento utilizzando jquery e con la chiamata Ajax ad una classe Java per il recupero delle occorrenze.
La pagina html si compone di un form con 2 text box nome e cognome, digitando il cognome dal secondo carattere in poi parte la chiamata Ajax che suggerisce sotto la lista dei nominativi che iniziano con quelle lettere.
I nominativi proposti sono sotto forma di cognome/nome, alla selezione di ognuno di essi è invocato un metodo javascript che splitta la stringa e inserisce il nome nella casella di testo del nome e il cognome in quella del cognome.

Ho utilizzato jquery versione 1.3.2.

Il metodo autocomplete è il seguente:

 $("#cognome").autocomplete("data.jsp",{minChars: 2,onItemSelect: function(item) {
                var text = item.innerHTML;
                var splitResult=text.split("  ");
                var nom=splitResult[1];
                var cog=splitResult[0];
                document.getElementById("nome").value=nom;
                document.getElementById("cognome").value=cog;
                $("#testoProva").html(text);
            }});


Data.jsp è la pagina java che torna i dati in formato stringa, tra parentesi graffe si possono specificare varie proprietà del metodo, in questo caso la minLength che indica dopo quante lettere si dovrà effettuare la chiamata e l' onItemSelect che ci dice cosa fare una volta che dalla lista di proposte di nominativi se ne sceglie uno.

Di seguito incollo il codice

index.jsp
<html>
<head>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css"></link>
    <script src="js/jquery_1.3.2_min.js" type="text/javascript"></script>
    <script src="js/jquery.autocomplete.js"></script> 
    <style>
        input {
            font-size: 120%;
        }
    </style>
</head>
<body>

 <h3>
Nome</h3>
<input id="nome" name="nome" type="text" />
    <h3>
Cognome</h3>
<input id="cognome" name="cognome" type="text" />
     <div id="testoProva">
     
     </div>
<script>
       
            $("#cognome").autocomplete("data.jsp",{minChars: 2,onItemSelect: function(item) {
                var text = item.innerHTML;
                var splitResult=text.split("  ");
                var nom=splitResult[1];
                var cog=splitResult[0];
                document.getElementById("nome").value=nom;
                document.getElementById("cognome").value=cog;
                $("#testoProva").html(text);
            }});

        
       
    </script>
</body>
</html>


data.jsp

<%@page import="it.db.Caricamento"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>

<%
    
    Caricamento db = new Caricamento();
    
    String query = request.getParameter("q");
    
    List<String> nomi = db.getData(query);
   
    Iterator<String> iterator = nomi.iterator();
    while(iterator.hasNext()) {
        String nome = (String)iterator.next();
        out.println(nome);
    }
%>


Caricamento.java (classe che simula accesso al db)
 
package it.db;
import java.util.*;
public class Caricamento {
  private int totale;
     private String nomi = "Zegna  Mario Alberto,Zorro  Marco,Abate  Matteo,Abatino  Carlo,Sgarbi  Vittorio,Selvaggio  Mario";
     private List<String> nomiL;
     public Caricamento() {
         nomiL= new ArrayList<String>();
         StringTokenizer st = new StringTokenizer(nomi, ",");
          
         while(st.hasMoreTokens()) {
             nomiL.add(st.nextToken().trim());
         }
         totale = nomiL.size();
     }
      
     public List<String> getData(String query) {
         String nom= null;
         query = query.toLowerCase();
         List<String> matched = new ArrayList<String>();
         for(int i=0; i<totale; i++) {
             nom= countries.get(i).toLowerCase();
             if(nom.startsWith(query)) {
                 matched.add(nomiL.get(i));
             }
         }
         return matched;
     }
}

martedì 3 luglio 2012

Jquery autocompletamento


Per ottenere l'autocompletamento Jquery dispone di funzioni built-in.
L'implementazione è molto semplice:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("input#autoritaRilascio").autocomplete({
    source: ["COMUNE", "PREFETTURA", "MOTORIZZAZIONE", "MINISTERO DEGLI INTERNI","PROVINCIA","REGIONE","STATO ESTERO"]
});
  });
</script>


In questo caso su un campo di tipo textbox con id=autoritaRilascio sono precaricati dei valori (lato js) che compaiono come suggerimenti.
E' possibile (devo vedere come) anche effettuare il caricamento di questi dati tramite chiamata server.
Qui sotto un esempio di funzionamento:

Autorità di rilascio documento:

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;
    }
}


mercoledì 2 maggio 2012

JQuery utilizzo base DatePicker

Mi sono trovato ad utilizzare il controllo calendario di Jquery e l’ho trovato veramente comodissimo e di facile utilizzo.
Dal sito di Jquery occorre scaricare :
  1.  Ultima versione fwk Jquery;
  2.  Ultima versione fwk Jquery-ui (quello che comprende i widget più diffusi);
  3. File javascript di localizzazione per il calendario (da http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ ).
Il file del punto 3 va scaricato a parte mentre i primi due, unitamente al css, si trovano nello zip scaricato dal sito (nel mio caso jquery-ui-1.8.20.custom.zip ).
Ho quindi creato una Web App per testare il calendario, nella jsp ho inserito i link ai js:


<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-it.js">
</script>


Quindi nel codice javascript della jsp ho inserito la funzione che costruisce il calendario :

<script type="text/javascript">
   $(function(){
    $(".data:input").datepicker({showAnim: 'slide',
      changeMonth: true ,
      changeYear: true,
      maxDate:new Date(),
      showButtonPanel: true,
      showOn: "button",
   buttonImage: "images/calendar.gif",
   buttonImageOnly: true

      }
        
      );
   });
</script>


Il selettore $(“.data:input”) specifica che questo codice js sarà applicato a tutti gli elementi di tipo <input type=”text” /> aventi attributo di tipo class denominato “data”.

All’interno della funzione datePicker ci si può veramente sbizzarrire in quanto esistono innumerevoli proprietà da poter inserire, tra cui animazioni, pulsanti particolari ecc.
Nel mio caso è stato interessante utilizzare gli attributi:
• changeMonth e changeYear che settati a true consentono di poter selezionare velocemente da combo anni e mesi;
• maxDate che consente di limitare la data inserita (in questo caso consente al massimo di inserire la data odierna);
• showButtonPanel , che settato a true consente di visualizzare sotto il calendario i pulsanti “Oggi” e “chiudi”;
• showOn buttonImage e buttonImageOnly che con il settaggio su proposto consentono di visualizzare a fianco della text box un bottone al cui click si attiva il calendario.
Esistono poi una miriade di funzionalità aggiuntive, basta consultare le guide on line disponibili.