Volando come un Rasteriz

Ho lavorato per diverso tempo con il framework .NET ed ho sempre trovato fantastici i controlli offerti: primo su tutti il datagrid. Su Internet esistono diverse alternative e quasi tutte o promettono tanto (dando nulla) oppure sono a pagamento. Finalmente, però, sono riuscito a trovare un datagrid dal funzionamento simile, senza particolari compromessi: Ingrid.

Sul sito ufficiale possiamo trovare alcuni esempi e una spiegazione (molto semplice) che ci permetterà di integrarlo velocemente nei nostri progetti. Degna di nota è la possibilità di integrarsi a tabelle già esistenti: fattore che lo rende immediatamente utilizzabile anche in progetti già esistenti.

Sito ufficiale: http://www.reconstrukt.com/ingrid/

Continua la sfilza di articoli previsti su jQuery: spero vi faccia piacere.

Oggi vedremo come effettuare una richiesta http asincrona tramite javascript (AJAX), sfruttando la libreria jQuery.

jQuery ha una serie di metodi all’interno, che permettono una gestione a 360° delle richieste AJAX. Grazie a questa fantastica libreria, infatti, potremo con semplicità interrogare una pagina esterna e se vogliamo recuperarne il risultato, oppure, interrogare un file javascript ed eseguirne il suo contenuto: magnifico. Tuttavia i suoi utilizzi non si limitano solo a questo ma si estendono anche ad interrogazioni di dati JSON. Come si intuisce, quindi, l’articolo potrebbe essere molto vasto.

Lasciandovi il beneficio del dubbio sulla possibilità di un approfondimento in seguito, oggi vi proporrò tre esempi:

• Una semplice richiesta Ajax che analizzerà il successo o l’insuccesso della richiesta
• Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo mostrerà un alert con il risultato HTML della pagina interrogata
• Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo eseguirà del codice Javascript estratto dalla richiesta remota

Bene. Iniziamo.

Una semplice richiesta Ajax che analizzerà il successo o l’insuccesso della richiesta

Il caso è molto semplice. Se la richiesta viene eseguita con successo, eseguiamo la funzione in success, in caso contrario eseguiamo quella in error.

$.ajax({
	type:"GET",
	url: "remote_req.html",
	cache: false,
	success: function() { $("#resRichiesta1").html('Richiesta inviata e completata!'); },
	error: function() { $("#resRichiesta1").html('Errore nella richiesta!'); }
});

Ovviamente sostituite il file remote_req.html con la pagina web che volete interrogare.

Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo mostrerà un alert con il risultato HTML della pagina interrogata

Anche in questo esempio, ottenere il risultato non è difficile. Le differenze con lo script precedente sono poche e si riscontrano soltanto nella parte “success”. Vediamo:

$.ajax({
	type:"GET",
	url: "remote_req.html",
	cache: false,
	success: function(html) { $("#resRichiesta2").html('Richiesta inviata e completata!'); alert(html); },
	error: function() { $("#resRichiesta2").html('Errore nella richiesta!'); }
});

Anche in questo caso andremo a sostituire la pagina remote_req.html con la pagina da richiedere.

Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo eseguirà del codice Javascript estratto dalla richiesta remota

Ed ora analizziamo la terza, nonché ultima, tecnica da noi trattata: l’esecuzione di codice Javascript remoto. Anche qui, la procedura è molto semplice.

$.ajax({
	type:"GET",
	url: "js/alert_remoto.js",
	cache: false,
	dataType: "script",
	success: function(js) { $("#resRichiesta3").html('Richiesta inviata e completata!'); },
	error: function() { $("#resRichiesta3").html('Errore nella richiesta!'); }
});

Ed eccoci giunti alla fine di questo Howto.

Per i più “bisognosi” ho creato un archivio con gli esempi completi da poter testare ed utilizzare. Potete scaricarlo cliccando qui.

jQuery non è soltanto una libreria snella e funzionale ma, con la sua estensione destinata alle interfacce utente, permette di esprimere al massimo il suo valore aggiunto.

jQuery UI (sostanzialmente: User Interface) offre un valido supporto per l’astrazione di interazioni ed animazioni a basso livello. Inoltre, fornisce diversi effetti, widget con grafica personalizzata e molto altro ancora.

Oggi tratteremo proprio il widget Datapicker: un componente che, una volta inizializzato implementerà, all’interno di una casella testo, un vero e proprio calendario che sicuramente migliorerà e semplificherà l’esperienza degli utenti all’interno dei nostri progetti.

L’immagine proposta all’inizio del post rende completamente l’idea di quanto abbiamo intenzione di realizzare: una semplice casella di testo (input di tipo text, di un form) ed un po’ di Javascript… questi gli ingredienti.

La comodità offerta dal datapicker non si limita, però, al solo gradimento grafico. Andiamo ben oltre grazie al supporto di comandi brevi da tastiera che ci permetteranno di navigare all’interno di esso con facilità:

• pag su/giù – mese precedente/successivo
• ctrl+pag su/giù – anno precedente/successivo
• ctrl+home – mese corrente oppure apri quando viene chiuso
• ctrl+sinistra/destra – giorno precedente/successivo
• ctrl+sopra/sotto – settimana precedente/successiva
• invio/enter – accetta la data selezionata
• ctrl+fine – chiudi e cancella la data scelta
• esc – chiudi senza selezionare nulla

Per utilizzare jQuery UI, ovviamente dovremo includere (oltre al classico file jQuery base) anche la libreria jQuery  (che possiamo scaricare dal sito ufficiale oppure includere tramite le Google API Ajax Libraries).

Scriviamo qualche riga di codice HTML per creare una casella di testo:

<div class="esempio_datapicker">
    Scegli la data: <input type="text" name="datapicker" id="datapicker" />
</div>

Ed ora veniamo al cuore del sistema:

<script type="text/javascript">
$(document).ready(function() {
	$("#datepicker").datepicker($.datepicker.regional['it']);
});
</script>

Bene. Abbiamo finito… se non ho commesso errori a scrivere, dovrebbe funzionare tutto. Per maggiori informazioni, comunque, potete seguire la guida ufficiale.

<script type="text/javascript">
	$(function() {
		$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
		$("#datepicker").datepicker($.datepicker.regional['fr']);
		$("#locale").change(function() {
			$('#datepicker').datepicker('option', $.extend({showMonthAfterYear: false},
				$.datepicker.regional[$(this).val()]));
		});
	});
	</script>