Plugin jQuery per aggiornare facilmente una tabella via AJAX

da

A che serve?

Per riempire/aggiornare una tabella con dati ottenuti con una richiesta asincrona utilizzando le librerie jQuery.

Com’è?

Il plugin è questo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var baseuri = 'http://www.example.com/'

$.fn.extend({
  updateTable: function(){
    var url = baseuri + 'ajax/' + $(this).attr('id') + '.php';
    var table = $(this);

    $.ajax({
      url: url,
      dataType: 'json',
      error: function(a,b,c) { alert(c); },
      success: function(data, ts, xhr) {
        if(data.length > 0) {
          var html = '';
          $.each(data, function() {
            html += '<tr>';
            $.each(this, function(k, v){
              html += '<td>' + v + '</td>';
            })
            html += '</tr>';
          });

          table.children('tbody').html( html );       }
      }
    });
  }
});

Come funziona?

Per funzionare correttamente serve un markup di questo tipo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<table id="list-entries">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="center">Nessun elemento in lista</td>
    </tr>
  </tbody>
</table>
...

Il campo id sarà il nome dello script (in questo caso list-entries.php) alla quale la funzione $.ajax farà riferimento. Lo script si occuperà di prelevare i dati da un database e restituirli in formato json (in questo caso). I dati verranno inseriti all’interno del tag <tbody>. Di default lasciamo una riga di avviso nel caso non ci siano dati disponibili.

Per farlo funzionare basterà fare una chiamata classica del tipo

1
$('#list-entries').updateTable();

Dabblet: un nuovo CSS playground

da

Buonasera, sono di corsa e ci tenevo a scrivere qualcosa prima del nuovo anno. Quindi:

È con viva e vibrrrrante soddisfazione che vi consiglio un nuovo tool che mi sta tornando utile ultimamente (anche perché non è uscito da molto), si tratta di un playground dedicato ai designers, infatti è improntato sul linguaggio CSS piuttosto che su JavaScript (vedi JS Bin e jsFiddle) ed è molto utile per i piccoli e grandi test sui CSS che portano via tempo.

Tagliando corto, questo tool si chiama Dabblet ed è stato sviluppato da Lea Verou (qui potete trovare la sua introduzione).

Microsoft implementa gli upgrade automatici in Internet Explorer

da

Si, arrivo anche io… con i miei tempi, ma ci arrivo.

Dopo aver letto questo articolo di Windows Blog devo ammettere che mi è scesa una lacrima di gioia. In parole povere nel prossimo futuro i browsers di Microsoft si trasformeranno lentamente in il browser di Microsoft.

Passo Indietro

Leggendo questo articolo di Paul Irish ho capito a quale “catastrofe” gli sviluppatori/designer web stavano andando incontro. Entro il 2019, anno (previsto) di rilascio di IE17, i nostri siti e le nostre web applications avrebbero dovuto supportare una versione di Chrome, una versione di Safari, una versione di Opera, una versione di Firefox e ben dieci versioni di Internet Explorer; che volendo essere pignoli dovrebbero essere estese a 72, dato che ogni versione di IE, a partire dalla 8, ha una modalità per emulare le versioni precedenti . Ma teniamo per buono il dieci, che bastano e avanzano, non credo esistano o esisteranno mai utenti con IE9 che navighino in modalità IE7.

Oh yeah!

Cosa succederà da Gennaio 2012? Inizialmente in Brasile e Australia, poi nel resto del Mondo, gli utenti Windows (XP, Vista e Seven) che avranno attivato l’update automatico di Windows Update vedranno il loro browser Internet Explorer sempre aggiornato all’ultima versione disponibile (compatibilmente con il loro sistema operativo ovviamente, poichè sappiamo che, ad esempio, IE9 per XP non esiste).

I punti di forza di questa “rivoluzione” sono molteplici, gli utenti avranno il loro browser sempre aggiornato alla versione più veloce e (sopratutto) sicura disponibile. Ovviamente (?) Microsoft è attenta al rispetto delle scelte del cliente, perciò se io non intendo aggiornare automaticamente il mio IE8 sul mio pc Windows Seven sono liberissimo di non farlo, e se lo faccio per sbaglio sarò altrettanto libero, a mio rischio e pericolo, di disinstallare l’aggiornamento.

Credo i punti deboli di questa scelta siano inesistenti, tenendo conto che la scelta del silent update è già stata implementata da Chrome e ha funzionato divinamente fino ad ora, non vedo perchè non possa funzionare, con i dovuti paletti che Microsoft deve mettersi, anche con Internet Explorer. I punti deboli restano i cicli di vita troppo lunghi (10 anni) dei software Microsoft, quindi nel 2018, anno di uscita di IE16, ci sarà sicuramente ancora qualche utente che userà IE8; ovviamente se fosse per il programmatore, egli supporterebbe solo l’ultima versione di un browser, ma si sa che il cliente ha sempre ragione.

Convertire una data da formato “SQL” a formato “standard”

da

This is kiss.

A che serve?

Innanzitutto spieghiamo perché ho virgolettato “SQL” e “standard” nel titolo: per formato “SQL” in realtà intendo il formato scientifico:

(anno)-(mese)-(giorno) → 2011-12-11

e per “standard” intendo il formato latino:

(giorno)/(mese)/(anno) → 11/12/2011

Ebbene la prossima riga di codice PHP servirà per gestire questa conversione.

Come si fa?

Il procedimento è semplice, spezziamo la stringa in un array, riversiamo quest’ultimo (in questo caso, essendo un array a dimensione 3, verranno solamente invertiti il primo e il terzo elemento) e poi uniamo gli elementi dell’array in una stringa usando come separatore il carattere che più ci aggrada.

1
2
3
4
5
$date = date("Y-m-d"); // 2011-12-11

$latin_date = implode( "/",
                array_reverse(
                  explode("-", $sql_date) ) );

Come si usa?

Convertire da un formato all’altro è semplice, basta usare una funzione simile:

1
2
3
4
5
function to_latin( $date, $glue = "/", $delimiter = "-" ) {
  return implode( $glue, array_reverse( explode($delimiter, $date) ) );
}

$latin_date = to_latin( date("Y-m-d") );

Ottenere un parametro GET con jQuery

da

Brevemente, posto qualche riga di codice tanto per iniziare a scrivere qualcosa, sperando che possa essere utile ai meno esperti. Come da titolo, questo vi sarà utile per ottenere un parametro get via JavaScript.

A che serve?

Dato un indirizzo del tipo http://www.example.com/pippo.html?pluto=cane dovete ottenere il valore di pluto usando il vostro fedelissimo framework jQuery.

Come si fa?

Creiamo la nostra funzione che chiameremo get, la quale non fa altro che applicare un’espressione regolare all’url che stiamo visitando.
La parte finale serve per controllare che il risultato:

  1. Esista (altrimenti torna 0)
  2. Abbia un valore (se abbiamo un URL tipo http://www.example.com/pippo.html?pluto la funzione ritornerà 0)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.get = function( param ) {

  var regexp = '[\\?&amp;]' + param + '=([^&amp;#]*)';

  var res = new RegExp( regexp )
                  .exec( window.location.href );

  if ( !res ) {
    return 0;
  }
  else {
    return res[1] || 0;
  }

}

Come si usa?

Semplicemente: alert( $.get('pluto') );