Sostituzione di elementi HTML con jQuery
Ieri abbiamo approfondito l’argomento relativo alla clonazione di elementi HTML adottando il framework JavaScript jQuery, questa volta utilizzeremo lo stesso strumento per affrontare una procedura differente, vedremo infatti come sia possibile sostituire delle porzioni di markup con altre senza un nuovo caricamento della pagina corrente; per far questo sfrutteremo le potenzialità del metodo html() della nostra libreria Open Source.
La nostra prima operazione sarà naturalmente quella di includere il framework tra i tag “head”; fatto questo, definiremo tramite CSS una classe che sarà associata al contenitore (un “div”) dell’elemento da sostituire:
<style type="text/css">
.boxTesto{
margin-bottom:4px;
padding:4px;
border:1px dotted #ddd;
}
</style>
Ora passeremo al markup di pagina, introdurremo quindi il div, gli elementi da sostituire, un button che consenta di richiamare il metodo per la sostituzione e un secondo pulsante per il reset:
<div class="boxTesto"><em>Testo da sostituire.</em></div> <div class="boxTesto"><em>Altro testo da sostituire.</em></div> <p> <button id="sostituisci">Sostituisci</button> <button id="reset">Annulla</button> </p>
Infine, introdurremo le funzioni che verranno evocate in seguito all’evento previsto, cioè la pressione di uno dei due buttons:
<script type="text/javascript">
$("#sostituisci").click(function () {
$('.boxTesto').html('<strong>Testo sostitutivo.</strong>');
});
$("#reset").click(function () {
location.reload();
});
</script>
E’ quindi arrivato il momento di proporre la piccola applicazione proposta nel suo complesso:
<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.boxTesto{
margin-bottom:4px;
padding:4px;
border:1px dotted #ddd;
}
</style>
</head>
<body>
<div class="boxTesto"><em>Testo da sostituire.</em></div>
<div class="boxTesto"><em>Altro testo da sostituire.</em></div>
<p>
<button id="sostituisci">Sostituisci</button>
<button id="reset">Annulla</button>
</p>
<script type="text/javascript">
$("#sostituisci").click(function () {
$('.boxTesto').html('<strong>Testo sostitutivo.</strong>');
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
Con questo script sarà possibile sostituire un numero indefinito di elementi HTML, motivo per il quale è importante che il metodo html() sia associato ad una classe CSS e non ad un id in quanto quest’ultimo è richiamabile una sola volta per pagina.
