$(). Load() invece di caricare l'intera pagina, ma è necessario mantenere il menu su tutte le pagine

Desidero ricaricare l'area di contenuto del mio sito Web con la funzione jQuery/AJAX $().load(). Ma il mio problema è che il header e footer deve essere visualizzato su tutte le pagine, indipendentemente dall'URL di ingresso.

Il mio sito è stato creato utilizzando i modelli, quindi il mio primo pensiero è stato quello di rimuovere l'output del layout sopra e sotto il contenuto univoco, come eviterei quindi ie. il menu viene visualizzato due volte. Ma ho capito che se l'utente non entra nel mio sito attraverso la prima pagina, diciamo index.php, non vedrà mai l'intestazione o il piè di pagina solo una pagina di testo senza stile.

La mia domanda è, come faresti a risolvere questo problema? JavaScript (+ jQuery) e HTML5 sono consentiti.

fonte

2012-04-15 Emil

Che lingua stai usando per il tuo back-end? PHP? Fusione fredda? La bellezza del caricamento AJAX è che indipendentemente dalla pagina su cui una persona atterra, otterrà ciò che hai messo PRIMA della chiamata AJAX, quindi l'intestazione, il piè di pagina, il menu, ecc. Saranno già lì. Come indicato di seguito, è possibile caricare la risposta AJAX in qualsiasi contenitore della pagina. Se si utilizza AJAX per inserire contenuti quando qualcuno fa clic sul menu, è sufficiente sostituire l'html all'interno del contenitore con nuovi contenuti dalla risposta AJAX. – Lazerblade

Emil; dovresti selezionare quale risposta è stata corretta per la tua soluzione se l'hai trovata. Altrimenti aggiorna la tua domanda con cosa è cambiato se non altro. – veeTrain

Lo farò, mi dispiace.Non ho avuto il tempo di indagare ulteriormente le risposte, stavo cercando di lavorare con jmort253, ma ho ricevuto degli errori (farò un commento a riguardo). Purtroppo il mio lavoro ha filtrato la connessione al mio server, quindi non ho alcuna possibilità di fare nulla quando sono qui. – Emil

page.php:

<div id="header"></di> 
<div id="mainContent"></div> 
<div id="footer"></div>

JS:

$("#content").load("page.php #mainContent"); //that will only load mainContent

$.get('page.php', function (data) { 
    data = $(data).find('#mainContent').html(); 
    $("#content").empty().append(data); 
});

Per ulteriori informazioni, vedere la sezione nella documentazione jQuery su load() and page fragments

fonte

2012-04-15 22:31:52 mgraph

Ho provato questo metodo, ma sembra che #mainContent venga caricato due volte, dato che tutte le pagine includono tutte e 3 le div. Penso di aver bisogno in qualche modo di afferrare il contenuto di #mainContent ma non sono sicuro di come possa essere fatto. – Emil

@Emil vedi anwser aggiornato '$ .get ...' – mgraph

Grazie, sembra funzionare ma alcuni javascript non vengono caricati correttamente. Dovrò dare un'occhiata a questo un po 'più tardi. – Emil

Il t echnique che stai cercando è noto come Hijax, in cui intercetti la risposta da una richiesta AJAX e estrai solo la parte del DOM che intendi sostituire sulla pagina renderizzata.

L'idea generale è che l'URL reale di se stessi sarà ancora restituire il contenuto a piena pagina, quindi se la richiesta proviene da un nuovo visitatore, l'intera DOM verrà caricato, ma se la richiesta proviene da l'utente fa clic su un hijaxed link sulla tua pagina con un selettore CSS specificato, quindi viene sostituita solo la parte della pagina identificata dal selettore.

Dai uno sguardo allo Hijax - jQuery Plugin. Il sito vero e proprio è costruito usando il plug-in, e se guardi la tua scheda di rete e guardi l'ispettore nei tuoi strumenti Chrome o Firebug, puoi vedere il contenuto essere scambiato senza sostituire menu, intestazione o altri elementi che non vengono sostituiti

fonte

2012-04-15 22:35:27 jmort253

È più pulito e più sensato usare '$ .load()' qui - come mgraph implica nella sua risposta, solo una parte di una pagina può essere caricata con esso. – Bojangles

Concordato, motivo per cui ho modificato la sua risposta per includere un collegamento alla documentazione 'load' e anche upvoted. Per un'applicazione web, è al 100% la strada da percorrere. Tuttavia, il vantaggio della tecnica Hijax è che il pulsante Indietro funziona ancora. Se stai costruendo un sito web, sospetto che probabilmente vorresti che il tuo pulsante Indietro funzioni, in modo che il comportamento non vada perso. – jmort253

Sembra che potresti avere un paio di opzioni diverse. Se un utente visita il tuo sito ma non accede alla prima pagina, puoi semplicemente verificare che l'intestazione e i piè di pagina vengano visualizzati dopo il caricamento della pagina. Se non vengono trovati, deve essere creata la struttura iniziale del sito. Si potrebbe anche decidere di costruire la prima pagina (index.php) in questo modo in modo che ogni pagina sarebbe gestita allo stesso modo

$(document).ready(function() { 
    // If an element of id "header" isn't found in the DOM 
    if (!$("#header").length() > 0) { 
     // Generate the header and insert it as the first element of the DOM 
    } 
    if (!$("#footer").length() > 0) { 
     // Generate the footer and append it to the last element of the DOM 
    } 
});

Non ci sono senza dubbio altre soluzioni che si potrebbe intrattenere pure; probabilmente potresti avere una inclusione in ogni pagina che viene inclusa solo se la pagina viene richiesta tramite una richiesta GET piuttosto che una richiesta AJAX.

fonte

2012-04-15 22:42:29 veeTrain

$(). Load() invece di caricare l'intera pagina, ma è necessario mantenere il menu su tutte le pagine

risposta

Problemi correlati