jQuery load, ci permette di caricare intere pagine (o alcuni elementi, div e molto altro) o effettuare operazioni restando nella stessa pagina.
01. Panoramica generale
Come detto, potete pensare jQuery load come un avanzatissimo iframe, capace di inglobare dentro di se e di visualizzare intere pagine web. Ovviamente questa è la soluzione più classica, ma la potenza di load non si limita di certo qui. La funzione load ad esempio è usata nei form di contatti, nell’embed di pagine dinamiche e molto altro.
02. Usi e sintassi principale
Ovviamente prima di scrivere qualsiasi cosa dobbiamo includere le librerie jQuery nell’ head del vostro sito. Fatta questa doverosa precisazione possiamo passare al code vero e proprio:
$('#risultato_grafico').load('grafico.html');
Sono partito da un esempio, molto esplicativo dell’uso di load. Il codice che vedete sopra in pratica usa il div “contenitore” chiamato #risultato_grafico e ci butta dentro (letteralmente!) la pagina html chiamata “grafico.html”. Il risultato sarà simile a quello di un classico iframe, il codice però risulterà molto più pulito (in html vi basterà creare il div #contenitore_grafico vuoto!).
Load non si limita a questo ci permette ad esempio di visualizzare solo una parte della pagina caricata. Ecco un esempio:
$('#contenitore_grafico').load('grafico.html #2011');
In questo caso ad esempio possiamo visualizzare nel contenitore del grafico solo il div relativo al grafico del 2011. Questo ci permette di “spezzettare” la pagina e poter integrare i vari pezzi che ci servono proprio come un puzzle (occhio a non abusarne però!). Grazie a questo processo ad esempio risulta molto comodo modificare un solo file (grafico.html) per rendere, di fatto, effettive tutte le modifiche anche nelle altre pagine.
03. Usi avanzati
E se volessimo aprire un alert quando la pagina è caricata? Ecco un code di esempio:
$('#contenitore_grafico').load('grafico.html', function() {
alert('Grafico caricato!');
});
Come vedete dopo il “solito” codice ho aggiunto una funzione di alert a schermo che avvisa il caricamento avvenuto. Potete davvero sbizzarirvi in questo caso, ad esempio al posto del “classico” alert potete fare apparire un gradevole popup grafico aggiungendo dopo function (al posto di alert) questo codice:
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
Ovviamente nel caso usaste questa soluzione vi invito a leggere questo articolo sull’overlay per completare il code (va creata anche la parte html e css!).
04. Passare dati al server
Una funzione molto usata sopratutto per i form di contatti, è quella di poter caricare delle variabili sul server usando il comando load di JQuery. Ovviamente le variabile dovranno poi essere elaborate con php ma questo vi permette di restare dentro al stessa pagina senza sgradevoli pagine “di servizio”.
Un esempio lampante è il caso di dover passare un array al server (ad esempio delle checkbox multiple):
$("#checkbox").load("form.php", { 'choices[]': ["Riky", "Targetweb"] } );
Ecco alcuni link utili e di approfondimento:
A domani!
direi che come articolo per chi si è appena avventurato nel mondo delle chiamate asincrone (o più comunemente chiamato ajax xD)
Ciao,
prima di tutto complimenti per il tuo sito, dagli articoli che pubblichi traspare la passione verso questo mondo che affascina anche me.
Avrei bisogno del tuo aiuto, sto realizzando un sito e dove possibile sto cercando di usare ajax tramite jquery.
Ti spiego in breve e spero di riuscire ad essere chiara:
io ho un div “main_content” che in base al click di un pulsante cambia il contenuto richiamando tramite uno switch il file php di riferimento, ovviamente ho utilizzato la funzione .load(). Io avrei bisogno di caricare una determinata pagina php nel div main_content ogni tot secondi ma solo se la pagina in questione è selezionata. Inserendo la funzione direttamente nel file php richiamato, mi succede che se cambio pagina lui ogni tot secondi mi ricarica di nuovo quella. Esiste qualche soluzione…non ho ancora molta esperienza…magari mi sto perdendo in un bicchiere d’acqua.
Spero tu possa aiutarmi.
Grazie 🙂
Un ulteriore informazione è che sto usando il modello MVC ma senza framework.
Onestamente non ho capito molto il problema XD non puoi fare n trigger (pulsanti) con n click function .load(pagina1) load(pagina2) etc.
Se devi solo visualizzare qualcosa puoi usare anche l’interessante funzione php chiamata “case”
potresti salvare la pagina in una variabile facendo così
var collegamento = $(‘id o classe del link’).attr(‘href’);
così hai sempre un riferimento della pagina che stai visualizzando
Probabilmente non mi sono spiegata bene, io ho ultizzato il case per il cambio pagina e funziona tutto. Io ho un file template.php con n pulsanti ai quali ho associato la funzione load che carica le pagine all’interno del div main content e fin qui tutto funziona!! 😀 Il problema nasce nel momento in cui dovendo fare diverse operazioni come interrogazioni db o ricezione notifiche, al ritorno dei risultati mi viene caricata la pagina di default e non quella da dove ho eseguito le istruzioni.
Ti posto un esempio:
funzione jquery:
function loadContent(id){
$(“#main_content”).load(switch_div.php?o=”+id+””);
}
file di switch php:
$cOption = $_GET[‘o’];
switch($cOption) {
case 1:
require_once(“profilo.php”);
break;
case 2:
require_once(“faq.php”);
break;
default:
echo ‘Sono la pagina di default’;
}
quindi se al click del mouse carico loadContent(1) nel main_content mi verrà caricata la pagina profilo.php. All’interno di profilo.php ho un form al quale invio dei dati, ma dopo l’invio mi ricarica la pagina di default invece che il risultato in profilo.php.
Dove sbaglio??
Grazie per la disponibilità!!!!!
🙂
prova a far considerare i risultati come una pagina html utilizzando gli header
header(‘Content-Type: text/html; charset=iso-8859-1’);
Ciao,
grazie per la guida,
ho notato che i contenuti caricati attraverso il load() non vengono indicizzati da google, infatti nel codice sorgente questi non esistono proprio, al loro posto appare semplicemente il div contenitore vuoto.
è possibile invece stamparli dentro in modo da renderli leggibili dai motori?
ciao
eh eh se li visualizzi perdi la funzionalità e la bellezza dell’uso di load, in ogni caso se dovessi avere la necessità puoi farli visualizzare all’avvio della pagina e poi nascondere il contenuto con .hide() o css(“display”,”none”);
P.s Per visualizzarli all’avvio della pagina subito dopo document ready $(“”).load(xx);
Ottimo tutorial! Complimenti! Davvero utilissimo, mi hai salvato! 😉
Ciao! Veramente interessante il tuo turorial, solo due domande. Posso caricare vari html nello stesso div? Mi spiego meglio attraverso un pulsante carico un html poi con un altro pulsante carico un altro html sempre nello stesso div. Per fare questo ho bisogno di far una sorta di refresh in modo che carico il nuovo contenuto?
Seconda domanda per caricare un html esterno è meglio il metodo load() o get() ????
grazie!!!
Onestamente non ho capito molto la prima domanda, per la seconda per caricare pagine “esterne” html personalmente preferisco load.
Ciao Riccardo!
complimento per il sito, avrei una semplice domanda:
nel mio sito ho inserito i commenti con php e mysql, e tramite un po’ di jQuery gli inserisco direttamente sulla stessa pagina, però mi piacerebbe che il form che visualizza i commenti (presente in “commenti.php”) si aggiornasse da solo, mostrando il commento appena inserito.
o provato con .load(), in questo modo:
$(‘.success’).load(‘commenti.php’);
ma niente di niente 🙁
c’è qualche altro metodo?
Grazie ancora 😀
il procedimento da usare è quello Giovanni 😉
Grazie 🙂
per adesso sembra andare con AJAX puro, senza l’utilizzo di plug-in.
Comunque articolo utile. Ciao
Ho un problema con .load()
io carico dinamicamente in un div un file .html esterno che ha i suoi js all interno ecc, uno dei js carica il contentuto dinamicamente da un file esterno, io lancio tramite load il file che mi serve ma non mi carica il contenuto dinamico, posto sotto il codice semplificato:
div#ese_div_book {
position: absolute;
width: 100px;
height: 100px;
background: midnightblue;
}
$(“#ese_div_book”).click(function() {
$(“#contenitore_libro”).css(“visibility”, “visible”);
$(“#button_book”).css(“visibility”, “visible”);
// console.log(“ARRIVA VALORE”, _nQuest);
$(“#contenitore_libro”).load(“http://localhost/librohtml/index.html?lis=AB”, function() {
alert(“Load was performed.”);
});
});
$(“#button_book”).click(function() {
$(this).css(“visibility”, “hidden”);
$(“#contenitore_libro”).css(“visibility”, “hidden”);
return false
});
quell che ottengo è il div caricato, ma non i div interni che sono presi dinamicamente da un file .js e inseriti nel div id=”genera”
ciò che ottengo è:
<!– –>
Manuale AM 2019
<!–
var hyphenate=createHyphenator(hyphenationPatternsIt
,{debug:true,hyphenChar:’-‘}
);
–>
::-webkit-scrollbar {
background-color: transparent;
width: 8px;
background: url(“assets/images/circle_g.svg”);
}
::-webkit-scrollbar-thumb {
background: lightgray;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
width: 8px;
}
body {
overflow-y: overlay;
overflow-x: hidden;
}
::-webkit-scrollbar:hover,
::-webkit-scrollbar:active {
width: 14px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
width: 14px;
}
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover {
width: 14px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
width: 14px;
}
::-webkit-scrollbar:hover::-webkit-scrollbar:active {
width: 14px;
}
::-webkit-scrollbar-button {
display: block;
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
min-width: 10px;
min-height: 10px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
width: 14px;
}
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
width: 14px;
}
::-webkit-scrollbar-track:hover::-webkit-scrollbar-track:active {
width: 14px;
}
::-webkit-scrollbar-track:active::-webkit-scrollbar-track:hover {
width: 14px;
}
::-webkit-scrollbar:hover::-webkit-resizer {
width: 14px;
}
::-webkit-scrollbar:hover,
::-webkit-scrollbar-button:hover,
::-webkit-scrollbar-corner:hover,
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track-piece:hover,
::-webkit-resizer:active,
::-webkit-scrollbar:active,
::-webkit-scrollbar-button:active,
::-webkit-scrollbar-corner:active,
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-track:active,
::-webkit-scrollbar-track-piece:active {
width: 14px;
}
div#marginDX:hover::-webkit-scrollbar,
div#marginDX:hover::-webkit-scrollbar-button,
div#marginDX:hover::-webkit-scrollbar-corner,
div#marginDX:hover::-webkit-scrollbar-thumb,
div#marginDX:hover::-webkit-scrollbar-track,
div#marginDX:hover::-webkit-scrollbar-track-piece,
div#marginDX:hover::-webkit-resizer,
div#marginDX:hover::-webkit-scrollbar,
div#marginDX:hover::-webkit-scrollbar-button,
div#marginDX:hover::-webkit-scrollbar-corner,
div#marginDX:hover::-webkit-scrollbar-thumb,
div#marginDX:hover::-webkit-scrollbar-track,
div#marginDX:hover::-webkit-scrollbar-track-piece {
width: 14px;
}
<!—->
Manuale AM ’19
Indice
Next
X
<!–
–>
<!– –>
ma io vorrei:
I VEICOLIClassificazione dei veicoli Ai fini del Codice della Strada viene definito veicolo, con o senza motore, qualsiasi macchina che circoli su strada condotta dall’uomo (eccetto quelle ad uso di bambini o di invalidi). I veicoli sono classificati nelle seguenti categorie: Veicoli privi di motore 1.01 Veicoli a braccia: spinti o trainati da un uomo a piedi 1.02 Veicoli a trazione animale: veicoli trainati da uno o più animali 1.03 Velocipedi (biciclette): con due o più ruote azionati per mezzo di pedali × Veicoli a braccia: spinti o trainati da un uomo a piedi × Veicoli a trazione animale: veicoli trainati da uno o più animali …….