Doppio click con JQuery

In questi giorni sto eseguendo un pò di refactoring di codice javascript presente in un progetto Asp.Net 2.0, facendo uso delle API offerte dal framework JQuery.
Una delle primissime funzioni che ho sostituito completamente è stata quella in cui tramite l’evento doppio click su controlli di tipo Textbox si inseriva la data corrente.
L’Event Model di JQuery è estremamente versatile e ben strutturato oltre che semplice nell’utilizzo.
Se per esempio all’evento onclick di un button vogliamo far apparire un dialog box di alert senza far uso di un particolare framework javascript, dobbiamo scrivere qualcosa di questo tipo:

   1: <input type="button" id="btnTest" value="Click" onclick="javascript:alert( 'test click');" />

Utilizzando l’Event Model JQuery possiamo far uso del comando bind(). L’esempio precedente diventa:

   1: $('#btnTest').bind('click', function(event) { alert('test click'); });

La sintassi del comando bind:

   1: bind( eventType, data, function)

Ritornando alla funzione che accennavo ad inizio post, devo dire che l’utilizzo delle API JQuery mi ha permesso di ridurre sensibilmente il codice migliorando così anche la mantenibilità.

Nello specifico, supponendo di avere un controllo Textbox targato runat server:

   1: <asp:TextBox ID="txtDoubleClick" runat="server" Text=""></asp:TextBox>

Il codice per implementare un gestore di eventi per l’evento double click:

   1: <script type="text/javascript">
   1:  
   2: $(function() {
   3:   $('#txtDoubleClick').bind('dblclick', function(event) { setDateNow() })
   4: });
   5: function setDateNow() {
   6:   var date = new Date();
   7:   var day = date.getDate();
   8:   var month = date.getMonth() + 1;
   9:   var year = date.getFullYear();
  10:   $('#txtDoubleClick').val(day + "/" + month + "/" + year);
  11: }
</script>

E’ possibile passare diversi tipi di eventi:

blur	focus	load
resize	scroll	unload
beforeunload	click	dblclick
mousedown	mouseup	mousemove
mouseover	mouseout	mouseenter
mouseleave	change	select
submit	keydown	keypress
keyup	error

Se invece, volessimo ottenere lo stesso risultato per controlli Textbox presenti per esempio in un controllo GridView:

   1: <asp:GridView ID="dgrTest" runat="server">

   2:   <Columns>

   3:     <asp:TemplateField>

   4:       <ItemTemplate>

   5:         <asp:TextBox ID="txtDoubleClick" runat="server" Text=""></asp:TextBox>

   6:       </ItemTemplate>

   7:     </asp:TemplateField>

   8:   </Columns>

   9: </asp:GridView>

lo script potrebbe essere così modificato:

   1: <script type="text/javascript" src="jquery-1.2.6.min.js"></script>

   2: <script type="text/javascript">

   3:   $(function() {

   4:     $("#dgrTest input[type=text]").bind('dblclick', function(event) { setDateNow($(this)) })

   5:   });

   6:   function setDateNow(id) {

   7:     var date = new Date();

   8:     var day = date.getDate();

   9:     var month = date.getMonth() + 1;

  10:     var year = date.getFullYear();

  11:     id.val(day + "/" + month + "/" + year);}

  12: </script>

Essenzialmente la modifica più sostanziale riguarda il gestore dell’evento applicato a tutti i controlli input di tipo text presenti nella griglia con id dgrTest.
Concludo con un altro comando altrettanto importante one():

   1: one(eventType, data, function)

permette di rimuove l’handler dopo la prima esecuzione dell’evento specificato.