Aprire link ad un pagina in un div senza refresh

Ceck2 · 9 Ott 2012

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 · 10 Ott 2012

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 · 10 Ott 2012

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:

Michele Dalessandro · 27 Ott 2012

e se volessi far refreshare il div in questione (esempio pagina1)??? che comando/codice inserisco?

criric · 29 Ott 2012

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>

Bally Screen · 29 Ott 2012

3wschool

Hai provato con http://www.w3schools.com/html/ o http://www.w3schools.com/css/

mamuthones · 4 Lug 2013

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 · 8 Set 2013

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>

criric · 8 Set 2013

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 · 8 Set 2013

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 · 9 Set 2013

criric ha scritto:
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

criric · 10 Set 2013

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 · 18 Set 2013

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 · 29 Set 2013

Non credo che ci sia qualcosa che possa superare ajax in questi casi

Luke Guada · 1 Ott 2013

criric ha scritto:
Non credo che ci sia qualcosa che possa superare ajax in questi casi

Ho visto che molti usano una funzione/array tramite php e gestiscono tutto da la...
Per tua esperienza, meglio quel sistema o questo con Ajax??

Guido84 · 6 Ott 2013

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 · 1 Set 2014

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 · 1 Set 2014

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

albertusa · 9 Set 2014

Ciao! Criric... posso postare sempre qui il codice?

criric · 9 Set 2014

posta al massimo lo sposto io

Aprire link ad un pagina in un div senza refresh

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Utente Attivo

Super Moderatore

Super Moderatore

Utente Attivo

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Discussioni simili