Corsi on-line

Aggiornare il contenuto di un div con jQuery senza reload della pagina

Gli aggiornamenti in real time possono essere particolarmente utili quando si desidera mostrare un nuovo contenuto all’interno di un div senza per questo determinare un ulteriore caricamento della pagina corrente; la soluzione proposta in questo articolo si basa sul framework JavaScript jQuery e consente di accedere alla funzionalità desiderata attraverso un semplice evento come un click su un collegamento ipertestuale.

La prima operazione da compiere sarà quella di richiamare jQuery tra i tad “head” di pagina, nel caso specifico ho utilizzato il CDN (Content Delivery Network) di Mountain View, ma se si preferisce l’inclusione di una copia locale del framework questo non influirà sul funzionamento dell’applicazione.

Sempre tra gli “head” viene inserito il JavaScript grazie al quale sarà possibile intercettare l’evento “click” e determinare attraverso di esso il caricamento dei nuovi contenuti:

<html>
<head>
<title>Modificare il contenuto di un div con jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#modificaTesto").click(function() {
$("#contentBox").html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius tortor elit. In dapibus nulla sit amet nisi varius a tristique ante adipiscing. Nullam lacus massa, suscipit id vehicula in, dignissim a sapien. Vestibulum fringilla dui at nibh laoreet et consequat nibh facilisis.");
});
});
</script>
</head>

Tra i tag “body” andranno invece inseriti il “div” e il collegamento che fanno riferimento ai due selettori precedentemente definiti: “contentBox” (per il contenuto) e “modificaTesto” (per il link)

<body>
<div id="contentBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</div>
<br />
<a id="modificaTesto">[Modifica]</a>
</body>
</html>

L’applicazione creata potrà essere integrata per creare diverse tipologie di soluzioni come per esempio il collegamento di un excerpt ad un contenuto completo magari prelevato dinamicamente da una base di dati.

Post correlati
  • grazie mitico chiaro e preciso

  • anonimo

    e se al posto di puro html volessi scrivere php come potrei fare?

  • maxbossi

    Ciao e benvenuto!
    In che senso? se vuoi effettuare un’elaborazione in PHP devi usare ajax in senso proprio, quindi i metodi $.ajax, $.post o $.get di jQuery per richiamare un file (php) che compie le operazioni di cui hai bisogno.

I più letti del mese
Tematiche