Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Scripting→Sostituzione di elementi HTML con jQuery
  • 05
    LUG
    2012

Sostituzione di elementi HTML con jQuery

Scritto da Claudio Garau | Scripting

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.

  • HTML
  • jQuery
  • markup

Naviga tra i post del Blog

← Clonazione di elementi HTML con jQuery
→ jQuery: disabilitare un pulsante per il submit dopo l’invio di un form

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
Post correlati
  • Clonazione di elementi HTML con jQuery 04/07/2012
  • jQuery: disabilitare un pulsante per il submit dopo l’invio di un form 07/07/2012
  • Serializzazione degli input da form con jQuery 08/10/2015
  • jQuery Confirm Plugin 16/03/2011
  • jQuery e consenso per il trattamento dei dati personali 30/12/2013
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina01/01/1970
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript01/01/1970
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP01/01/1970
  • Parsing di un file JSON con JQueryParsing di un file JSON con JQuery01/01/1970
  • javascript-codiceJavascript: una funzione per passare dati col metodo POST01/01/1970
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie