May 122013
 

Proviamo a costruire un albero i cui elementi possono essere trascinati, potrebbe tornare molto utili per organizzare diverse informazioni.

A livello di html si tratta di costruire una lista contenente elementi di secondo livello:


<h2>Sposta gli elementi dell'albero</h2>
<ul id="target">
<li>And a list</li>
<li>With items</li>
<li>
And items containing subitems
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>And more items containing subitems
<ul>
<li>Sub 4</li>
<li>Sub 5</li>
</ul>
</li>
</ul>

Useremo anche un piccolo css per creare comodo spazio di trascinamento (è bene non trascurare l’aspetto visivo):


ul {
border: 1px dashed gray;
margin: 10px;
padding: 10px 10px 10px 30px;
}

Infine rendiamo tutto operativo con jQuery UI


$(document).ready(function() {
$('ul').sortable({connectWith: 'ul'});
});

L’esempio

 

May 042013
 

Lo scopo di trascinare elementi attraverso una pagina web spesso è quello di rilasciarli in una landing area particolare.

Costruiamo una pagina con un elemento da trascinare e una landing area costituita da un div, i nostri elementi saranno opportunamente formattati tramite css:


<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
#target { width: 400px;height: 100px;border: 2px solid black;}
</style>

...

<span>SPAN</span>
<div id="target">Rilascia il tag span nel rettangolo</div>

Come nel post precedente durante il trascinamento cambieremo lo stile all’elemento trascinato.

Attiviamo lo script al document.ready:


$(document).ready(function() {
$('#target').droppable();
$('span').draggable();
});

In questo modo abbiamo definito l’elemento trascinabile e la landing area per la ricezione degli elementi trascinati.

Si tratta di gestire gli eventi del rilascio all’interno dell’area e del passaggio sul bordo, assoceremo due semplici funzioni che scriveranno all’interno del target:


$('#target').droppable({
drop: function() {
$(this).html('DROPPED!');
},
out: function() {
$(this).html('ancora un po...');
}
});

L’esempio

 

 

May 022013
 

In attesa che HTML5 possa essere utilizzato senza ricorrere a strategie di fallback troppo costose, in altre parole, inattesa che ie7 e ie8 scendano ulteriormente come quota di mercato, se vogliamo trascinare elementi in giro per la nostra pagina web possiamo utilizzare jquery UI. La libreria dovrà essere collegata alla pagina dopo jQuery:


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

Nell’html inseriremo alcuni elementi, senza una particolare strategia, faremo in modo che siano tutti trascinabili (draggable):


<h2>Trascina tutti gli elementi in giro per lo schermo</h2>
<p>Paragrafo trascinabile</p>
<h2>Titolo trascinabile</h2>
<ul>
<li>Prima lista</li>
<li>Seconda lista</li>
</ul>

Per renderli trascinabili al document.ready applicheremo il selettore universale e il metodo draggable di jQuery UI:


$(document).ready(function() {
$('body *').draggable();
});

Ultimo step, durante il trascinamento applicheremo un css particolare usando una classe appesa al volo da jQuery UI:


<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
</style>

L’esempio

 

Apr 302013
 

Le chiamate AJAX classiche lavorano con l’oggetto XMLHTTPREQUEST (XHR). La maggior parte dei browser non consenton ad XHR di accedere ad altri server, o meglio a domini diversi rispetto a quello da cui parte la chiamata. Pero ovviare a questa limitazione è stato invantato JSONP, ovvero il JSON viene avvolto all’interno di una chiamata a una funzione. Invece di fare una richiesta AJAX, viene aggiunto un elemento script che punta allo script JSONP all’interno del documento HTML e una funzione di callback viene chiamata per accedere allo script.

Ovviamente attenzione perché i vendors hanno fatto questa scelta per motivi di sicurezza: infatti no c’è nessuna validazione del codice prima dell’esecuzione, quindi serve cautela.


<!DOCTYPE html>
<html lang="en">
<head>
<title>JSONP</title>
</head>
<body>
<h2>Premi il bottone per effettuare una richiesta.</h2>
<button id="trigger">GET</button>
<br>
<div id="target"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$.getJSON('http://search.twitter.com/search.json?q=jquery&callback=?', function(data) {
$.each(data.results, function(index, value) {
$('#target').append(value.text + '<br>');
});
});
});
});
</script>
</body>
</html>

La maggor parte del codice dovrebbe essere chiara alla luce dei post precedenti.

Per impostazione predefinita, il gestore JSONP in jQuery cerca il parametro callback=? nella stringa di query. Il “?” viene sostituito con una funzione di callback jQuery generato da inserire nel JSONP dal server È possibile modificare le impostazioni se il parametro ha un altro nome di callback o quando il metodo di callback non è parametrizzato. Il miglior consiglio è quello di evitare, quando possibile JSONP

L’esempio

 

 

Apr 262013
 

Quali sono gli eventi ajax? Prepariamo un piccolo tutorial per esporli tutti.

Partiamo da una semplicissima pagina che esegue una chiamata ajax:

<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<div id="log"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$('#target').load('snippet.html');
});
});
</script>

A questo punto aggiungiamo una porzione di script che appenderà al document la gestione di tutti gli eventi e quando questi si scatenano scriverà all’interno del div con id log

$.each(('ajaxError ajaxSend ajaxStart ajaxStop ajaxSuccess ajaxComplete').split(' '),
function( i, name ) {
$(document).bind(name, function(event, xhr) {
$('#log').append('Event: ' + event.type + '<br/>');
});
});

L’esempio

Apr 242013
 

Un problema classico e particolare della chiamata ajax potrebbe essere legato al timeout della chiamata.

Potremmo ipotizzare che dopo un po’ non siamo disposti ad aspettare oltre il server e procederemo con un messaggio di errore.

Nel nostro caso fissereme questo timeout a un secondo.

Riutilizzaremo ancora una volta la nostra struttura consolidata:


<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
...
});
</script>

E andiamo a impostare la chiamata ajax specificando un timeout:


$.ajax({url: 'sleep', timeout : 1000})

quello che succederà dopo sarà gestito dalle funzioni done() e fail() in modo tradizionale


.done(function(data, xhr) {
$('#target').append('ok: ' + data);
})
.fail(function(xhr, text, error) {
$('#target').append('Timeout: ' + error);
});

Nel nostro caso non trovando la url, andrà in timeout

L’esempio

 

Apr 222013
 

Oltre a gestire il successo o l’insuccesso della chiamata ajax potrebbe essere necessario avere qualche informazione in più sul motivo dell’insuccesso.

Predisporremo una chiamata simile a quelle del post precedenti ma questa volta chiameremo una url non esistente:


<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$.ajax('url-non-esistente')
...
});
});
</script>

Nel caso in cui tutto andasse bene, ma in questo contesto sarebbe un problema, abbiamo il metodo done():


.done(function(data, xhr) {$('#target').append('Esito OK');})

Se invece le cose andassero male come previsto useremo fail() e gestiremo tramite i parametri di ingresso il codice dell’errore e il messaggio testuale, nel nostro esempio saranno rispettivamente codice errore 404 e messaggio: “file not found”


.fail(function(xhr, text, error) {
$('#target').append('Errore! Code ' + xhr.status + ' and text ' + error);
});

L’esempio

Apr 202013
 

Quando facciamo chiamate ajax e quindi richieste asincrone al nostro web server, potremmo incappare nel problema delle chiamate fantasma: ovvero faccio una richieste, ovviamente resto nella pagina, ma per qualche motivo il server non risponde, vediamo come gestire questa situazione.

La prima parte di html è semplice: bottone e div target:


<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>

La parte successiva la dedicheremo a gestire la chiamata in modo tradizionale, chiederemo un json:


$(document).ready(function() {
$('#trigger').click(function() {
...
});
});

A questo punto si tratta di strutturare la chiamata ajax in modo un po’ diverso,

ovvero alla chiamata ajax passeremo come coppia key/value la url e il dataType


e successivamente useremo il metodo then() che accetta due parametri che saranno due funzioni di callback

una per il successo, la prima, una per la gestione dell’errore, la seconda.


.then(
function(data) {$('#target').append('Valore restituito: '+ data.name + '<br>');},
function() {$('#target').append('Chiamata AJAX fallita.<br>');}

Ultimo step con il metodo always() dichiareremo la fine delle operazioni, dato che avviene sia in caso di successo sia in caso di insuccesso.


.always(function() {
$('#target').append('FINE');

L’esempio

 

 

 

 

Apr 182013
 

Il metodo più semplice per effettuare delle richieste ajax e caricare del codice html all’interno di un ben preciso target è utilizzare il metodo load().

Nella nostra pagina inseriremo un bottone sul quale faremo il solito binding del click che farà una chiamata ajax a un file html.

Il nostro web server manderà il file html richiesto che verrà iniettato all’interno di un div target opportunamente predisposto.

Per comprendere quanto succede nella pagina è consigliabile osservare gli eventi tramite la console di firebug se si usa firefox oppure la console di chrome.

Il codice html


<button id="trigger">GET</button><br>
<div id="target"></div>

E poi il codice javascript che sarà composto da gestione dell’evento e chiamata ajax con il metodo load()


$(document).ready(function() {
$('#trigger').click(function() {
$('#target').load('snippet.html');
});
});

Ovvero all’evento click sull’oggetto che ha id trigger vai a riempire il div con id target con la risposta della chiamata load()

L’esempio

 

Apr 162013
 

In questo tutorial proponiamo una semplice chiamata ajax che riceverà come risposta dei dati in formato json.

La risposta sarà laseguente:


{
"name": "lorenzo de ambrosis",
"email" : "pippo@gmail.com"
}

La chiamata ajax sarà innescata dal click su un buttone e la risposta verrà inserita in un div target:


<button id="trigger">GET</button><br>
<div id="target"></div>

Associamo l’evento click come al solito al document.ready:


$(document).ready(function() {
$('#trigger').click(function() {
....
});
});

E arriviamo al cuore dell’esercizio: useremo il metodo get al quale passeremo come primo parametro la URL da richiedere, il secondo parametro sarà la funzione di callback il terzo il tipo di dato:


$.get('02a-test-values.json', function(data) { }, 'json');

La funzioen di callback riceve come parametro di input data che è la risposta del nostro web server, ovvero i dati in formato json,

che noi useremo per riempire la nostra pagina

$('#target').append('The returned value is: ' + data.name);

L’esempio