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

Nuovo Utente
8 Set 2013
19
0
0
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

Nuovo Utente
8 Set 2013
19
0
0
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.