Aprire link ad un pagina in un div senza refresh

Stato
Chiusa ad ulteriori risposte.

Ceck2

Nuovo Utente
8 Ott 2012
6
0
0
Ciao a tutti!
Sto cercando un metodo alternativo ai frame per realizzare una cosa del genere:

http://html.it/guide/esempi/guida_html/frames/frameset16/indice.html

La mia pagina che intendo realizzare "si comporterà" come questa solo che preferisco utilizzare i div invece che i frame.

Ho sentito tanto parlare di Ajax, JQuery ecc... ma dato che non ci sono riuscito di mio, e in rete non ho trovato nulla che mi possa aiutare più di tanto , ho provato a domandare qui.

Grazie a tutti!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
non è consentito dal regolamento aprire discussioni ugualii in sezioni diverse
quella in ajax l'ho chiusa

visto che non hai postato il codice che hai creato ti posto un esempio completo di come potresti fare
pagina principale
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Sito</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style type="text/css">
            #container {
                margin:auto;
                width: 1020px;
                overflow: hidden;
                background-color: #E4E4E4;
            }
            #menu {
                float:left;
                width:220px;
                background-color: yellow;
            }
            #content {
                float:left;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="menu">
                <ul>
                    <li id="pagina1">Pagina 1</li>
                    <li id="pagina2">Pagina 2</li>
                    <li id="pagina3">Pagina 3</li>
                </ul>
            </div>            
            <div id="content">
                Contenuto della home
            </div>
            <script  type="text/javascript">
                $("#menu ul li").click(function() {
                    var param =  $(this).attr("id");
                    $.ajax({  
                        type: "GET", 
                        url: param + ".html", 
                        success: function(response) {
                            $("#content").html(response);                
                        } 
                    });
                })
            </script>
        </div>
    </body>
</html>
pagina1.html
HTML:
<style>
    p {
        font-size: 1.2em;
        font-weight: bold;
    }
</style>
<p>Pagina 1</p>
<div>
    Contenuto della prima pagina
</div>
pagina2.html
HTML:
<style>
    p {
        font-size: 1.2em;
        font-weight: bold;
    }
</style>
<p>Pagina 2</p>
<div>
    Contenuto della seconda pagina
</div>
e cosi via per tutti i link del menu

Nota che l'id del tag li corrisponde al nome della pagina
 

Ceck2

Nuovo Utente
8 Ott 2012
6
0
0
Ooooh la! :love: Era proprio quello che cercavo! Grazie mille

Ps.
Avevo aperto una discussione anche su Ajax perchè non sapevo se questo argomento era inerente ad Ajax o JQuery. Visto che però ora so che non è permesso da regolamento, non lo farò più :hammer:
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
dalla pagina 1 intendi?

potresti inserire unsa nuova chiamata ajax:
HTML:
<style>
    p {
        font-size: 1.2em;
        font-weight: bold;
    }
</style>
<p>Pagina 1</p>
<div>
    <input type="button" value="aggiorna" id="aggiorna"/>
</div>
<script  type="text/javascript">
    $("#aggiorna").click(function() {
        $.ajax({  
            type: "GET", 
            url: "pagina1.html", 
            success: function(response) {
                $("#content").html(response);                
            } 
        });
    })
</script>
 

mamuthones

Nuovo Utente
4 Lug 2013
1
0
0
pagina1 richiama un altra pagina

Salve avrei una domanda da porvi, riferendomi agli esempi precedenti se voglio che pagina1 con la validazione di un form o un link interno a pagina1 richiami un altra pagina sempre da caricare all' interno del div content come posso fare ? Grazie
 

Elisacau

Utente Attivo
8 Set 2013
20
0
1
con iframe funziona

ma or vorrei provare nche questo metodo mi aiuteresti ancora???
allora io ho attaccato il codice html che hai riposrtato , ma le voci del menu:
pagina 1
pagina 2
pagina3
sono solo un elenco non lincabile??
casa devo fare??
io ho copiato questo codice sulla mia index.... e creato tre pagine di prova 1 2 3:....
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Sito</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style type="text/css">
            #container {
                margin:auto;
                width: 1020px;
                overflow: hidden;
                background-color: #E4E4E4;
            }
            #menu {
                float:left;
                width:220px;
                background-color: yellow;
            }
            #content {
                float:left;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="menu">
                <ul>
                    <li id="pagina1">Pagina 1</li>
                    <li id="pagina2">Pagina 2</li>
                    <li id="pagina3">Pagina 3</li>
                </ul>
            </div>            
            <div id="content">
                Contenuto della home
            </div>
            <script  type="text/javascript">
                $("#menu ul li").click(function() {
                    var param =  $(this).attr("id");
                    $.ajax({  
                        type: "GET", 
                        url: param + ".html", 
                        success: function(response) {
                            $("#content").html(response);                
                        } 
                    });
                })
            </script>
        </div>
    </body>
</html>
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
vengono resi likabili dall funzione javascript con l'evento .click
il codice funziona cosi come è
devi assicurarti che il nome della pagina sia lo stesso del id del tag <li>
Codice:
<li id="nomepagina">Pagina 1</li>
perche poi viene indicato nell'url della chiamata ajax
Codice:
var param =  $(this).attr("id");
....
url: param + ".html",
qui devi stare attenta al percorso : se le tue pagine sono in una cartella diversa devi dichiararla
Codice:
url: "nomecartella/" + param + ".html",
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Rileggendo la discussione mi sono accorto che la domanda di mamuthones non ha ricevuto risposta
rispondo ora anche se in ritardo
nello stesso modo come postato nel messaggio nm 5 solo che invece di richieamare la stessa pagina ne chiami un altra
Codice:
type: "POST", 
url: "controllo_form.php",
 

Elisacau

Utente Attivo
8 Set 2013
20
0
1
vengono resi likabili dall funzione javascript con l'evento .click
il codice funziona cosi come è
devi assicurarti che il nome della pagina sia lo stesso del id del tag <li>
Codice:
<li id="nomepagina">Pagina 1</li>
perche poi viene indicato nell'url della chiamata ajax
Codice:
var param =  $(this).attr("id");
....
url: param + ".html",
qui devi stare attenta al percorso : se le tue pagine sono in una cartella diversa devi dichiararla
Codice:
url: "nomecartella/" + param + ".html",

Ciaooo Criric, è strano ho copiato il tuo codice cosi come tu lo hai scritto poi ho creato la "pagina1" la "pagina2" e la "pagina3" che sono nella stessa cartella dove ho la pagina dove ho copiato il tuo codice e lho chiamata index. .
Ma non funziona ....uff :confused::confused:
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ho copincollato il codice su una pagina online vedi qu e funziona
se hai un esempio online postalo che vediamo qual'è il problema
per far unscire la mano come su un link basta che aggiungi al css questo
Codice:
#menu li {
   cursor:pointer;
}
 

Luke Guada

Nuovo Utente
18 Set 2013
13
0
0
Ormai non si vedono quasi più in giro i vecchi Iframe... ad ora questo è il metodo migliore per creare una navigazione senza refresh?? oppure c'è qualcosa di più "ADATTO"??
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non credo che ci sia qualcosa che possa superare ajax in questi casi
 

Guido84

Nuovo Utente
6 Ott 2013
8
0
0
Firefox Problemi

Salve ragazzi e grazie per tutto...

volevo chiedervi: sto usando questo codice in un mio nuovo progetto e praticamente su chrome funziona senza problemi ma su firefox non va proprio, sapete dirmi perchè??
grazie in antipico

Guido
 

albertusa

Nuovo Utente
1 Set 2014
3
0
1
Salve...! Ho trovato per caso questa discussione al tema... io vorrei gentilmente aiuto, trovandomi nella stassa situazione, i code l'ho provato e ho capito tutto fino qui, ma il mio problema consiste che nel div content carico una pagina asp dove il utente scrive il suo messaggio, inviando sia con button or link... adesso pero non capisco come dovrei fare visto che la pagina fuori dal div funziona invece dentro il div funziona tutto tranne il invio di dati dal utente che a sua volta si dovrebbe ricaricare l'stessa pagina asp. Grazie!!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, rispondo prima a Guido84 che non avevo visto : io l'ho testato su firefox e funziona, apri una discussione riportando il codice e spiegando cosa a te non va.

Per il tuo problema, albertusa, proverò a fare qualche test, ma, anche a te consiglio di aprire una discussione riportando il codice e il problema
 
Stato
Chiusa ad ulteriori risposte.
Discussioni simili
Autore Titolo Forum Risposte Data
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
MrClog Aprire un link da una pagina PHP con "esplora risorse" PHP 3
Elisacau Aprire un link in un div nella stessa pagina!? HTML e CSS 7
L Aprire link in nuova pagina HTML e CSS 4
M Aprire il contenuto di un link in un altro div (senza aggiornare tutta la pagina) Javascript 1
N Aprire un link esterno dentro ad una pagina del sito HTML e CSS 6
L aprire un link esterno all'interno di una pagina web rispettando w3c. help :( HTML e CSS 5
P Aprire Un Link In Una Pagina Secondaria Flash 1
L aprire i link in una nuova pagina HTML e CSS 5
G [PHP] Aprire una cartella tramite un link PHP 1
filippino Aprire link esterni in iframe HTML e CSS 0
T Aprire il contenuto di un link in un DIV Javascript 3
A aprire link da un iframe ad un'altro Javascript 9
F Link su bottone Flash cs5 in dvd multimediale chiede permessi per aprire pagine siti Flash 7
V Come aprire link se selezionato chechbox Javascript 0
R Aprire un link nella stessa finestra del browser HTML e CSS 3
A aprire il contenuto di un link nel div content Javascript 16
G Firefox come aprire link in nuova scheda con altro tasto? Windows e Software 3
Y Aprire Iframe differenti da link differenti Javascript 0
grottafelix Aprire in link in una nuova finestra Javascript 5
E aprire link in altre pagine HTML e CSS 2
E fpdf salvare e aprire il file PHP 4
M pulsante per aprire una maschera che contiene controllo schede MS Access 0
C ACCESS Aprire maschera se valore non presente in una combo MS Access 7
R Aprire maschera con Openform filtrando un campo testuale con un valore recuperato da un'altra maschera MS Access 10
W Aprire un pop-up da un pop-up HTML e CSS 3
T Come aprire file .wtb Discussioni Varie 10
A Aprire la window form Add Connection da codice Visual Basic 4
S Aprire su Mac Progetto PSD salvato su win Photoshop 0
D [HTML] Non riesco aprire foto singole in un album creato con "iWebAlbum" HTML e CSS 1
A [MS Access] Aprire maschera con sottomaschera su ultimo record MS Access 0
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
Tommy03 Aprire un file .asp nel browser Classic ASP 5
K Aprire porte modem Tim smart Fibra Adsl e Connettività 0
ste80 [MS Access] Impossibile aprire una maschera da pulsante MS Access 2
R [MS Access] COME APRIRE UNA MASCHERA FACENDO DOPPIO CLICK SU UN RECORDSET MS Access 1
R [MS Access] aprire maschera con doppio click su recordset di sottomaschera MS Access 4
F aprire una pagina in un overlay jQuery 0
S [PHP] Aprire file in locale PHP 1
F [Javascript] Aprire file tramite jquery Javascript 0
trattorino [Javascript] aprire blocchi via via che si scorre Javascript 0
M Salvare i dati nel db e aprire altra pagina php PHP 7
C [PHP] Aprire la pagina dopo aver fatto il login PHP 1
Morganot37 Photoshop CC non può aprire l'immagine Webdesign e Grafica 5
S Aprire un marketplace Leggi, Normative e Fisco 0
G Aprire un app da pagina web Sviluppo app per Android 3
Shaovel [HTML] Aprire sito esterno cliccando immagine HTML e CSS 7
iap Aprire un ecommerce e sincronizzarlo al gestionale Discussioni Varie 1
M Aprire nuova scheda del browser con javascript Javascript 7
Shyson Aprire finestra popup con Safari Javascript 6

Discussioni simili