Jquery Ajax content loading, caricare contenuti html in un div
lunedì, maggio 19, 2008 18:40 scritto da neryoJquery Ajax content loading (XMLHttpRequest), caricare contenuti html in un div.
Capita sempre piu’ spesso di voler caricare porzioni di contenuti presenti in un sito, senza dover per forza ricaricare interamente tutto il contenuto della pagina.. questo tipo di interazioni sono la novita’ che contraddistinguono i siti e le applicazioni web di ultima generazione, che consentono di avere una rapporto di usabilita’ molto piu’ alto grazie a chiamate asincrone (Ajax), che ci permettono di interagire con le applicazioni in modo piu’ fruibile, avvicinando il web a vere e proprie applicazioni desktop.
Per realizzare questo tipo di chiamate dinamiche e interattive si utilizza solitamente l’oggetto XMLHttpRequest che e’ un elemento fondamentale della tecnica di sviluppo web conosciuta con l’acronimo Ajax.
Un esempio di script che realizza questo tipo di interazioni lo possiamo vedere in questa pagina.
Ma in questo post voglio pero’ illustrarvi come realizzare lo stesso meccanismo utilizzando il framework jQuery, che lo implementa in modo molto semplice, senza dover direttamenti occuparci dei dettagli sottostanti. Ricordando che jQuery a mio parere e’ il framework javascript che ha il rapporto tra semplicita’/potenza piu’ alto e anche le operazioni piu’ complesse vengono realizzate con pochissime righe di codice.
Detto questo vi illustro come caricare contenuti dinamici usando jquery in un div a cui gli e’ stato assegnato un id css univoco:
-
<script src="jquery-latest.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
-
$(document).ready(function(){
-
-
$("#contentArea").load("pagina.php");
-
-
});
-
-
</script>
-
-
<div id="contentArea"> </div>
se invece vogliamo variare il contenuto del div a secondo del link che primiamo possiamo creare una funzione:
-
<script src="jquery-latest.js" type="text/javascript"></script>
-
<script src="jquery-latest.js" type="text/javascript">
-
-
function loadContent(id) {
-
$("#contentArea").load("rpc.php?o="+id+"");
-
}
-
-
</script>
-
-
<body onLoad="loadContent(1);">
-
-
<a href="javascript:loadContent(1);">Tab 1</a> |
-
<a href="javascript:loadContent(2);">Tab 2</a> |
-
<a href="javascript:loadContent(3);">Tab 3</a> |
-
<a href="javascript:loadContent(999);">This content doesn’t exist</a>
-
-
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
-
-
</div>
-
</body>
Chiaramente nel file rpc.php richiamato dalla funzione load di jQuery, dovra’ essere implementata una struttura che ci permetta in base alla scelta numerica passata alla funzione loadContent() di selezionare il contenuto da restituire, questo puo ‘ essere realizzato usando uno switch case. Se non e’ sufficientemente chiaro il funzionamento potete scaricare il pacchetto da modificare sul sito di nodstrum.com presente nei riferimenti.
Riferimenti:
http://nodstrum.com/2007/03/20/jquery-content-loading/
http://docs.jquery.com/Ajax/load
http://it.wikipedia.org/wiki/XMLHttpRequest
(3 voti, media: 4,33 di 5)
Loading ...
7stars dice:
27-05-2008 alle 22:31
ciao,
a me serve tantissimo questa cosa…ma ho provato svariati metodi e ognuno mi dà qualche grattacapo…tipo questo dà errori con IE7,con firefox no…la pagina genitore è un asp protetta da login…ie mostra sempre errori nella barra di stato…la prima volta che carico la pagina cliccando sui links non succede nulla…se aggiorno tutto ok ma gli errori permangono. una volta “Autorizzazione negata”…un’altra “Proprietà o metodo non supportati dall’oggetto” oppure ancora “Previsto oggetto”…perchè tutto questo?? mi sta facendo disperare…ed invece dovrebbe essere una cosa semplice….
Simone M dice:
05-06-2008 alle 18:02
CIao,io utilizzo una tecnica molto semplice…
inserisco un IFRAME nascosto all’interno della pagina .. quando occorre vado a caricare una pagina dentro all’iframe che restituirà esclusivamente i dati che mi servono e li vado a scrivere nella pagina padre tramite la chiamata: PARENT.DOCUMENT.GEELEMENTBYID(“”).VALUE = codice_restituito nell’iframe.
L’ho usata con successo ad esempio per la gestione di : REGIONE / PROVINCIA / COMUNE in molte anagrafiche dove andavo a ricostruire l’Input SELECT dei comuni in base alla selezione della regione e provincia in modo dinamico (lINPUT SELECT era dentro una DIV della pagina padre) e tramite l’IFRAME popolavo i comuni… funziona molto bene !!
Simone M dice:
05-06-2008 alle 18:02
.. ah e dimenticavo funziona benissimo con tutti i browser .. =)
Emanuele dice:
24-06-2008 alle 02:21
Salve, io nel mio sito in html vorrei caricare in un div un contenuto xml comprensivo di formattazione xslt, l’xml me lo carica ma senza la formattazione, come posso fare?
remino dice:
09-01-2009 alle 10:39
Ho provato di testare la seconda funzione … ma mi da sempre l’errore “DoAction is not defined”.
Mi sai dire il perchè?
davide dice:
31-05-2009 alle 12:41
ciao, ma questo codice non funziona con IE, c’è la possibilità di renderlo cross browser?
Davide Lorenzo Marino dice:
23-10-2009 alle 16:28
Si la possibilità di farlo girare cross browser ci sta. Bisogna togliere dal codice i riferimenti al javascript puro e sostituirli con chiamate a funzioni di jQuery.
In pratica bisogna ad esempio sostituire questo codice:
Tab 1
con
Tab 1
e successivamente aggiungere nel nel corpo di $(document).ready(function() una cosa come:
$(“#tab1″).bind(“click”, function(event) { loadContent(1); })
Sarebbe opportuno togliere anche e sostituirlo con e aggiungere poi la chiamata loadContent(1) sempre nel corpo di $(document).ready(function()
Spero di essere stato chiaro. L’idea di fondo comunque è quello di non usare nella maniera più assoluta codice javascript diretto che crea problemi di cross browser e affidarsi invece alla più sicura libreria di jQuery
admin dice:
23-10-2009 alle 16:35
secondo me il problema non è usare jquery x il cross-browser, non in questo caso almeno, ma usare bene gli anchor con js su l’evento onclick..es..
< **a href="javascript:void(0)" onclick="loadContent(1); return false;" rel="nofollow">link< **/a>
* asterischi da togliere ovviamente