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

Mar 292013
 

Possiamo sicuramente usare jQuery per generare del codice html.

Una strada magari meno frequentata potrebbe essere quella presentata in questo tutorial. Iniziamo con il predisporre una classe css e due elementi html, un paragrafo segnaposto e un div contenitore:


<style>
.test {background-color:#FF9900;}
</style>
...
<p>Segnaposto</p>
<div id="contenitore"></div>

Nel nostro solito document.ready prepariamo invece una funzione che restituisce tre elementi di una lista:


var htmlGen = function() {
return '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
}

Ora si tratta di chiamare questa funzione posizionandola dopo il <p>, assegnando la classe test e iniettando nel tag html <ul> che genereremo al volo l’outpute della funzione precedente


$('<p/>', {
class: 'test',
html: $('<ul/>', {html: htmlGen})
}).appendTo('#contenitore');

Con questo risultato