jQuery Load: caricare elementi e fare più azioni sulla stessa pagina

jQuery Load: caricare elementi e fare più azioni sulla stessa pagina

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:

Documentazione ufficiale >>

A domani!

  1. 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 🙂

  2. 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”

  3. 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

  4. 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à!!!!!
    🙂

  5. 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

    1. 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);

  6. 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!!!

  7. 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 😀

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Site inspiration web agency: Epic

Site inspiration web agency: Epic