Incorporare pagine dinamicamente

Printable View

16-04-2015, 17.21.07

Incorporare pagine dinamicamente

Salve ragazzi,
nella mia pagina ho una barra laterale con tutti i link e al centro un div, vorrei che ad ogni click del relativo link mi INCORPORASSE la pagina corrispondente nel DIV.
Ovvero io ho già tutte le pagine belle e pronte ma non voglio che avviene il ricaricamento di tutta la pagina, ma vorrei che in quel div venisse incorporata la pagina cliccata, devo dirvi che io ho risolto questo problema ma mi sembra uno "script" molto stupido e lungo.
Per favore cercate di essere piu chiari possibili perchè sono da pochissimo su js e jquery.
16-04-2015, 17.42.00
karl94

Se hai già scritto del codice riportalo qua, magari si può sistemare. Inoltre sarebbe utile conoscere l'indirizzo della pagina in questione.
22-04-2015, 22.50.31

Jquery al click del relativo link della pagina fai una chiamata Ajax, al success append risposta to id div quindi o
$(idDiv).append(risposta) o risposta.appendTo(id-div) ....Ciao
23-04-2015, 22.37.28

Ci sei riuscito?Che poi mi è venuto un dubbio...ma le pagine che vuoi far comparire nel div dinamicamente al click dei link sono pagine del tuo sito(cioè interne al progetto)o esterne cioè qualsiasi link presente nel web?Perchè se sono interne al tuo progetto ci sono tante soluzioni, o fai una chiamata ajax o semplicemente(forse è meglio) al click del link recuperi l'id e con load(che è un metodo ajax sempre)..

Codice HTML:

<div class="bottoni"> <button id="prova">bottone1</button> <button id="prova2">bottone2</button> </div><br> <div id="divContenitore"> </div>

Codice:

$("#prova1").click(function(){ $('#divContenitore').load('http://localhost/miaPagina.php'); }); $("#prova2").click(function(){ $('#divContenitore').load('http://localhost/miaPagina.php'); });

Se invece il link è esterno nel web la cosa si complica un pochino, perchè stai facendo del cross scripting e con ajax non puoi farlo, dovresti inserire il link dentro un iframe che fai comparire al click del bottone però anche lì c'è da vedere perchè molti siti(giustamente) bloccano il cross scripting e non lo permettono.
18-06-2015, 01.50.55

Ti conviene aggiungere tutti i div e i contenuti delle diverse pagine in un solo file html. Poi con il css display:none; nascondi tutti i div tranne quelli che rappresentano la home page. Successivamente con Jquery usi il classico $("main#home").fadeOut('fast') sul div che devi nascondere e un $("main#pagina2").fadeIn('fast') su quello che vuoi mostrare. In questo caso la pagina html verrebbe:
<body>
<main id="home">
Div per i contenuti
</main>
<main id="pagina2">
Div per i contenuti
</main>
</body>

Invece ai link del menu attacchi un evento click che esegue i codici di fade o toggleClass che ti dicevo.
Ci sono diverse soluzioni, dipende molto dalle tue prioritá. Io cercherei di essere il più sintetico possibile, inoltre ricorda che avere pagine separate ti permette di inserire titoli e meta tag più specifici per i motori di ricerca.