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

Apr 142013
 

Facciamo un breve excursus sugli eventi legati ai form: Per l’occasione faremo il bind di diversi eventi e riporteremo in un placeholder gli accadimenti della pagina.

Partiamo da un semplice html contenente un form e appunto un paragrafo che funzionerà da placeholder:


<form action="#" method="post">
<label for="primo_campo">Primo campo</label>
<input type="text" name="primo_campo"  value="" id="primo_campo"><br>
<label for="secondo_campo">Secondo campo</label>
<input type="text" name="secondo_campo"   value="" id="secondo_campo"><br>
<label for="terzo_campo">Terzo campo</label>
<input type="text" name="terzo_campo" value="" id="terzo_campo"><br>
<label for="quarto_campo">Quarto campo</label>
<input type="text" name="quarto_campo"   value="" id="quarto_campo"><br>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<p id="placeholder"></p>

Procediamo quindo ad associare gli eventi al document.ready e quando si scateneremo andremo a registrare nella pagina l’accaduto, l’aspetto interessante sta nella specificità degli eventi legati al form:


$(document).ready(function() {
$('input').bind('blur change focus select submit', function(event) {
$('#placeholder').append('target = ' +
event.target.getAttribute('id') + ' ' +
'type = ' + event.type + ' <br/>');
});

});

L’esempio

 

Apr 122013
 

Raramente accade di dover controllare gli input da tastiera, con JQuery possiamo fare un binding degli eventi del tutto simile a quello per gli eventi del mouse.

Nella nostra pagina html predisponiamo un campo di input dove scrivere e tre paragrafi dove riportare la gestione degli eventi:


<input type="text">
<h1>Keydown</h1>
<p id="keydown"></p>
<h1>Keyup</h1>
<p id="keyup"></p>
<h1>Keypress</h1>
<p id="keypress"></p>

Poi come sempre al document.ready andiamo a mappare 3 eventi particolari: keydown, keyup e keypress. Passiamo l’event alla funzione in modo da sapere, e scrivere nella porzione html opportuna, il target dove si è scatenato l’evento, il tipo di evento. L’ultimo valore, which, sarà in vece il charCode, che puoi approfondire qui.


$(document).ready(function() {
$('input').keydown(function(event) {
$('#keydown').html('target = ' + event.target + '<br>' +
'type = ' + event.type + '<br>' +
'which = ' + event.which + '<br>');
});
$('input').keyup(function(event) {
$('#keyup').html('target = ' + event.target + '<br>' +
'type = ' + event.type + '<br>' +
'which = ' + event.which + '<br>');
});
$('input').keypress(function(event) {
$('#keypress').html('target = ' + event.target + '<br>' +
'type = ' + event.type + '<br>' +
'which = ' + event.which + '<br>');
});
});

L’esempio

Apr 102013
 

Oggi proviamo a spostare degi elementi della mostra pagina su e giù usando le funzioni insertAfter e insertBefore.

L’html sarà costituito da 5 div contenenti un testo e due bottoni per gli spostamenti, al primo posto nasconderemo via css il bottone su, all’ultimo posto nasconderemo il bootone giù.


<style>
div:first-of-type button.up {visibility: hidden;}
div:last-of-type button.down {visibility: hidden;}
</style>

...

<div>
<button>Up</button>
<button>Down</button>
Primo elemento.
</div>
<div>
<button>Up</button>
<button>Down</button>
Secondo elemento.
</div>
<div>
<button>Up</button>
<button>Down</button>
Terzo elemento.
</div>
<div>
<button>Up</button>
<button>Down</button>
Quarto elemento.
</div>
<div>
<button>Up</button>
<button>Down</button>
Quinto elemento.
</div>

Al document.ready mapperemo gli eventi in base alle classi e sposteremo con la nostra funzione il parent, cioè l’oggetto contenitore del buotton premuto


$(document).ready(function() {
$('.up').click(function() {
var parent = $(this).parent();
parent.insertBefore(parent.prev());
});
$('.down').click(function() {
var parent = $(this).parent();
parent.insertAfter(parent.next());
});
});

L’ultima nota interessante riguarda l’elemento risptto al quale fare lo spostamento, ma questo sarà restituito dalla funzione prev() o next(), cioè il precedente o il successivo allo stesso livello.

L’esempio

Apr 082013
 

Oggi proveremo a disegnare sul canvas di html5 con jQuery. Sarà un semplice esempio per iniziare a vedere cosa succede.

Nella pagina mettiamo un canvas, giusto con un bordino csse poi ci concentreremo sugli eventi legati al mouse.

Abbiamo bisgon di riferirci al canvas e impostare una variabile booleana draw a false:

var context = $('#target')[0].getContext('2d');

var draw = false;

Poi ci interessano 4 eventi legati al mouse, due posizioneranno la variabile draw a false (mouseup, mouseout) e uno a true (mousedown).

Quindi se abbiamo premuto e siamo dentro al canvas con mousemove disegniamo prendendo le coordinate del punto in cui sitrova il mouse per tracciare la linea.

$('#target')
.mousedown(function() {
draw = true;
})
.mouseup(function() {
draw = false;
})
.mouseout (function() {
draw = false;
})
.mousemove(function(event) {
var pos = $(this).position();
if(draw){
context.fillRect(event.pageX - pos.left, event.pageY - pos.top, 2, 2);
}
});

L’esempio

Apr 062013
 

La differenza tra remove() ed empty() è che mentre la prima funzione rimuove l’elemento selezionato dalla pagina e quindi non è più presente, controllare dall’ispettore degli elementi per credere, la seconda funzione semplicemnte lo svuota lasciandolo però all’interno della pagina stessa. Sarà necessario quindi inserire nella pagina due paragrafi a cui metteremo un bordino rosso con un css:


p {border: 1px solid red; }
...
<p id="remove">Questo paragrafo sparisce con la funzione remove()</p>
<p id="empty">Questo paragrafo si svuota con la funzione empty()</p>

Il primo lo rimuoveremo dalla pagina direttamente cliccandoci sopra, mentre il secondo verrà svuotato e quindi resterà solo il bordo rosso nella pagina:


$(document).ready(function() {
$('p#remove').click(function() {
$(this).remove();
});
$('p#empty').click(function() {
$(this).empty();
});
});

L’esempio

Apr 042013
 

Possiamo decidere di inserire dei contenuti nella nostra pagina anche prima o dopo un elemento preciso, faremo ricorso per questa operazione alle funzioni after() e before().

Nell’html predisponiamo un div e due bottoni sui quali mapperemo l’evento click.


<div id="target">
<button id="before">before()</button><br>
<button id="after">after()</button><br>
</div>

Per inserire dei contenuti prima del div target utilizzeremo la funzione before associata al medesimo pulsante, per inserire dopo useremo la funzione after:


$(document).ready(function() {
$('#before').click(function() {
$('#target').before('<p>Before</p>');
});
$('#after').click(function() {
$('#target').after('<p>After</p>');
});
});

L’esempio

Apr 022013
 

Una delle funzioni più potenti di jQuery è sicuramente la funzione clone(), per mette di clonare porzioni di codice, magari a partire da un template opportunamente costruito e stando attenti alla duplicazione di id o name nel caso dei form.

Sarà proprio un form il caso in cui andremo a testare l’utilizzo della nostra funzione. Partiamo dall’html:


<form action="" method="post">
<h2>Campi singoli</h2>
<label for="primo">Primo</label><br>
<input type="text" name="primo"><br><br>
<label for="secondo">Secondo</label><br>
<input type="text" name="secondo"><br><br>
<h2>Campi ripetuti</h2>
<button id="add">Add</button><br>
<div id="target"></div>
</form>
<div id="template">
<label for="terzo">Terzo</label><br>
<input type="text" name="terzo" ></br><br>
</div>

Il form è piuttosto normale, sono de le cose importanti da notare: il div con id target e il div con id template, questo sarà nascosto tramite css, ma sarà proprio questo l’elemento che andremo a clonare.

Si tratterò quindi di prendere tutto il conteuto del tag dic con id template, clonarlo e poi personalizzare il testo della label e il name del campo di input


$(document).ready(function() {
var rowCount = 0;
$('#add').click(function() {
$('#template *')
.clone()
.filter('input')
.attr('name', function(index, name) {
return name +'[' + rowCount + ']';
})
.end()
.filter('label').text( function(index, name) {
return name +'[' + rowCount + ']';
})
.end()
.appendTo('#target');
rowCount++;
return false;
});
});

Vediamo un attimo il codice con più calma: impostiamo un contatore a zero, poi al click sul bottone prendiamo tutto il contenuto di template(‘#template *’), lo cloniamo cerchiamo il tag input con la funzione filter e assegniamo all’attributo name il valore restituito dalla funzione che prende l’attributo name e gli aggiunge il valore del contatore. Ripetiamo la stessa operazione perla label, appendiamo tutto al target e incrementiamo il contatore per la prossima aggiunta.

L’esempio

 

Mar 312013
 

Vediamo un’altra possibilità, abbastanza elegante di aggiungere, o togliere, elementi dalla nostra pagina html.

Useremo le funzioni attach e detach di jQuery. Innenazitutto inseriamo nella nostra pagina i tag html protagonisti del tutorial:

[soucecode language="html"]

<body class=”detaching”>
<div>
<button class=”attach”>Attach</button>
<button class=”detach”>Detach</button>
<span>Elemento contenuto</span>
</div>

[/sourcecode]

si noti le classi attach e detach nei bottoni e la classe detching nel tag body. Quest’ultima classe servirà per nascondere il bottone inutile.

[soucecode language="css"]

<style>
.detaching button.attach {display: none;}
.attaching button.detach {display: none;}
</style>

[/sourcecode]

Al caricamento della pagina risulta nascosto il bottone attach, del resto l’elemento sarà già visibile e quindi verrà prima rimosso, si noti rimosso, non nascosto.

Lo script funzionerà in questo modo: al document.ready faremo il bind del click su ciascun bottone e procederemo con il detach() ovvero l’attach dell’elemento span presente nella pagina. Interessante la catena di selezioni: il click e su this oggetto del binding, risaliamo al parent, cioè il div e fra i suoi figli (children) cerchiamo il primo span (span:first) e lo rimuoviamo dalla pagina. L’attach è più semplice poiché è sufficiente poiché basta fare un appendTo().

Sarebbe finita qui se non si dovesse nascondere il bottone utilizzato e mostrare l’altro: questa operazione la facciamo modificando la classe del body, rimuovendo la vecchia e mettendo la nuova, cambiando quindi il slettore css attivo:

[soucecode language="javascript"]

$(document).ready(function() {
var el;
$(‘.detach’).click(function() {
el = $(this).parent().children(‘span:first’).remove();
$(‘body’).removeClass(‘detaching’).addClass(‘attaching’);
});
$(‘.attach’).click(function() {
el.appendTo($(this).parent());
$(‘body’).removeClass(‘attaching’).addClass(‘detaching’);
});
});

[/sourcecode]

L’esempio