Aprire link ad un pagina in un div senza refresh

Stato
Chiusa ad ulteriori risposte.
... In passato usavo questo sistema in asp per le sessioni commenti, dove richiamo la pagina asp con il respettivo form, quando il utente ivia i commento la stessa pagina si aggiorna aggiungendo i dati al database, fino qui tutto perfetto. Adesso però, ho cambiato sistema di gestire la pagina dal intero sito, dove richiamo sempre questa page asp al interno di un Div da una pagina html. La pagina asp che richiamo si carica perfettamente, ma nacce adesso il problema che non mi funziona più il form al interno della pagina asp, o meglio non riesco e non capisco come fare per inviare le variabile che il utente ha inserito nel form e poter ricaricare sempre la pagina asp al interno di questo Div html.

Il codice asp in questione
Codice:
If Len(Request.Form("username")) and Len(Request.Form("comment"))>3 then 
		conn.Execute "INSERT INTO tbl_comment (code, username, comment, name_page, myicon, stato, new_date, IP ) VALUES (" & _
				"'" & Replace(Request.Form("code"), "'", "''") & "', " & _
				"'" & Replace(Request.Form("username"), "'", "''") & "', " & _
				"'" & Replace(badWords(dellTagHtml(Request.Form("comment"))), "'", "''") & "', " & _
				"'" & Replace(Request.Form("name_page"), "'", "''") & "', " & _
				"'" & Replace(Request.Form("myicon"), "'", "''") & "', " & _
				"'" & Replace(Request.Form("stato"), "'", "''") & "', " & _
				"'" & Replace(Request.Form("new_date"), "'", "''") & "', " & _
				"'" & Request.ServerVariables("REMOTE_ADDR") & "')"
                                       
                                      Response.redirect(request.servervariables("http_referer"))
                                    
                                End if
bla.. bla... bla..


Invece il ocde per caricare la pagina asp è questo:
HTML:
<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+"" //Remember this object as being already added to page
}
}
}

</script>
Da qui la richiamo:
Codice:
<div id="contentarea"></div>
 <p><a href="javascript:ajaxpage('mypage.asp', 'contentarea'); loadobjs('.css', 'feature.js')">test</a></p>
 
Ultima modifica di un moderatore:
Ciao a tutti!

Sono arrivata a questo post facendo una ricerca con google ed ho trovato quello che stavo cercando, ho modificato il codice postato da Criric (#2) in base alle mie esigenze e funziona tutto.

Mi piacerebbe fare un'altra modifica... sono abbastanza alle prime armi... potete aiutarmi? Vorrei che nel mio div menu ci fossero una serie di immagini cliccabili invece che un elenco (pagina1, pagina2, pagina3) come proposto nel codice. Come posso fare?

Grazie!
 
Non vedendo in questa discussione il codice proposto da Criric posso solo tirare ad indovinare prova a sostituire le voci del tuo elenco con:
Codice:
<a href="pagina.html" target="_self"....><img src="tua immagine" ....></a>
Se non non ho centrato il problema posta il codice da modificare
 
Il codice a cui mi riferisco è quello della risposta #2 di Criric, cioè questo:
Codice:
<!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>

(Sorry, mi è venuto copiato male)
 
Ultima modifica:
Come puoi vedere, crea un elenco di links

Codice:
<ul>
  <li id="pagina1">Pagina 1</li>
  <li id="pagina2">Pagina 2</li>
  <li id="pagina3">Pagina 3</li>
  </ul>

Invece io vorrei tante immagini cliccabili... credo che vada modificato anche il resto del codice ed è quello che non so fare.
 
Ma a te così come è quell'elenco funzione come link
 
Funziona e fa quello che vorrei. Solo che invece di un elenco, vorrei che ci fossero delle immagini.
 
Ho capito ciò che vuoi in teoria basterebbe sostituire
Codice:
<li id="pagina2">Pagina 2</li>
con
Codice:
<li id="pagina2"><img src="tua-immagine.jpg"......></li>
Ma il fatto è che il codice così come l'hai postato a me non funziona
 
Più tardi provo a fare come mi hai detto, grazie!

Io ho semplicemente seguito le istruzioni date all'inizio di questo thread da Criric (risposta #2 e seguenti), ho creato le varie pagine come suggeriva lui e funzionava... però non ho provato a mettere online le pagine, ho fatto la prova offline. Il problema è questo?
 
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
Ciao criric
Io non sono stato a cercare errori ma a me questo codice non funziona la lista resta una lista senza tramutarsi in link
 
Ciao, confermo la modifica suggerita da Max 1 : inserendo un immagine nel tag <li> non dovrebbe crearti problemi.
Max prova il link che avevo postato come esempio se non ti funziona potrebbe esserci un probema di compatibilità browser.
 
Ho provato a inserire l'immagine, funziona alla grande!!! Ed era così semplice, pensavo ci volessero chissà quali modifiche... grazie ancora! :)

Max, probabile che dico una cosa banale, non ti funziona davvero o semplicemente non vedi la mano sul link? Perché all'inizio pensavo anch'io che non funzionasse, non avevo notato che erano link cliccabili anche senza che uscisse la solita manina. Me ne sono accorta leggendo la risposta #12 di Criric in cui suggeriva di aggiungere questo:

Codice:
#menu li {
  cursor:pointer;
}
 
.....Max, probabile che dico una cosa banale, non ti funziona davvero o semplicemente non vedi la mano sul link? Perché all'inizio pensavo anch'io che non funzionasse, non avevo notato che erano link cliccabili anche senza che uscisse la solita manina. Me ne sono accorta leggendo la risposta #12 di Criric in cui suggeriva di aggiungere questo:

Codice:
#menu li {
  cursor:pointer;
}
Si quello serve per aggiungere un cursore a manina, ma a me non funziona cliccandoci sopra come ho fatto notare a criric, e ho provato con chrome, IE e firefox e non so prorpio spiegarmi perchè a te funziona. BOH!
 
Max, forse non hai creato le 3 pagine html ? lo script richiama una pagina html che deve esistere
Codice:
url: param + ".html",
la pagina in pratica ha il nome dell'id del tag cliccato
Codice:
var param = $(this).attr("id");
 
a proposito di questa tematica ho un quesito da rivolgere a Criric

HTML:
<html>
<head>
<title>Sito 2</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></style>
</head>



<body>
     
                 
            <div id="panel_container_sx" class="" style="width:250px;background-color:red;">
 
                    <br>
                    <span class="" onclick="gest_submenu('11');"><img alt="" ><span style="position: absolute; margin: 10px 0px 0px 5px;">Menu</span></span>
                    <br><br>
                 
                    <div id="submenu_11" style="display:none;">
                        <a class="" href="test8.php?status=1&page=1" id="test8.php?status=10&page=1"><img alt="" ><span style="position: absolute; margin: 5px 0px 0px 5px;">Voce 1</span></a><br>
                        <a class="" href="test8.php?status=10&page=1" id="test8.php?status=10&page=1"><img alt="" ><span style="position: absolute; margin: 5px 0px 0px 5px;">Voce 2</span></a>
                    </div>
            </div>
     
     
     
     
        <script  type="text/javascript">
                $("#submenu_11 a").click(function() {
                    var param =  $(this).attr("id");
                    $.ajax({
                        type: "GET",
                        url: param ,
                        success: function(response) {
                            $("#panel_container_dx").html(response);              
                        }
                    });
                })
            </script>
     
     
     
        <div id="panel_container_dx" class="" style="width:1310px;padding-left:10px;background-color:blue;">
 
                 
                        <?php
                        $smistatore="";
                        $page="";
                        $smistatore = $_GET['status'];
                        $page = $_GET['page'];
                        if($smistatore == "1" && $page=="1")
                        {
                         ?>
         
                            <p>Riepilogo</p>
                 
                     
                        <?php
                        }
             
                        elseif($smistatore == "10" && $page=="1")
             
                        {
                         ?>
     
         

                            <p>Ciao </p>
                    <?php } ?>
                             
         
         
         
            <script  type="text/javascript">

                function gest_submenu(menuid) {
            var panelMenu = document.getElementById("submenu_" + menuid);

                if (panelMenu) {
                    if (panelMenu.style.display == "none") {
                        panelMenu.style.display = "block";
                    } else {
                        panelMenu.style.display = "none";
                    }
                }
            }
         
            </script>         
     
        </div> 
        </div>

</body>
</html>
in pratica cliccando sulla voce menu si apre un sotto menu tramite una funzione javascript .
Queste voci del sottomenu dovrebbero aprire il contenuto in un div che si chiama panel_container_dx senza ricaricare la pagina , attraverso la funzione javascript sopra riportata .. Si vede ad occhio che in realta' ricarica dal fatto che il sottomenu ritorna con style display none ..

Mi potete aiutare a capire l errore?
Vi ringrazio anticipatamente
 
Ultima modifica:
Cio' che sto cercando di realizzare e' l'utilizzo di javascript per non far ricaricare la pagina al click di vari sottomenu , pur facendo modificare il contenitore ad ogni link del menu e inoltre mantenere il cambio url dinamico che si utilizza tipicamente con php metodo $_GET test8.php?status=1&page=1 eccetera ..
Quindi un unica pagina con sezioni di pagine dinamiche che vengono prelevate a seconda delle sezioni del menu si cliccano e javascript per far in modo che non si vedi il reflesh .
Qualcuno mi puo' aiutare o indirizzarmi?
Vi ringrazio ..
 
modifica l'inizio della funzionecosi
Codice:
$("#submenu_11 a").click(function (e) {
                e.preventDefault();
in questo modo eviti che il tag <a> faccia il suo lavoro di ricaricare la pagina
 
Grazie Criric ,
e tutte le righe sotto a quella funzione rimangono inalterate giusto?
Codice:
...
var param =  $(this).attr("id");
                    $.ajax({
                        type: "GET",
                        url: param ,
                        success: function(response) {
                            $("#panel_container_dx").html(response);            
                        }
                    });
                })
            </script>

Eseguo delle prove e ti faccio sapere il funzionamento
 
Ook funziona quasi perfettamente .
Posto l'intero codice di esempio e subito dopo l anomalia in modo che anche altri che riscontrano questo problema possano capire come risolvere navigando in rete ..
Codice:
<html>
<head>
<title>Sito 2</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></style>
</head>
<style type="text/css">
            #container {
                margin:auto;
                width: 1020px;
                overflow: hidden;
                background-color: #E4E4E4;
            }
            #panel_container_sx {
                float:left;
                width:220px;
                background-color: yellow;
            }
            #panel_container_dx {
                float:left;
                width: 800px;
            }
        </style>


<body>
      
            <div id="container">      
            <div id="panel_container_sx" class="" style="background-color:red;">
  
                    <br>
                    <span class="" onclick="gest_submenu('11');"><img alt="" ><span style="position: absolute; margin: 10px 0px 0px 5px;">Menu</span></span>
                    <br><br>
                  
                    <div id="submenu_11" style="display:none;">
                        <a class="" href="test8.php?status=1&page=1" id="test8.php?status=1&page=1"><img alt="" ><span style="position: absolute; margin: 5px 0px 0px 5px;">Voce 1</span></a><br>
                        <a class="" href="test8.php?status=10&page=1" id="test8.php?status=10&page=1"><img alt="" ><span style="position: absolute; margin: 5px 0px 0px 5px;">Voce 2</span></a>
                    </div>
                  
                    <br>
                    <span class="" onclick="gest_submenu('12');"><img alt="" ><span style="position: absolute; margin: 10px 0px 0px 5px;">Menu2</span></span>
                    <br><br>
                  
                    <div id="submenu_12" style="display:none;">
                        <a class="" href="test8.php?status=11&page=1" id="test8.php?status=11&page=1"><img alt="" ><span style="position: absolute; margin: 5px 0px 0px 5px;">Voce 3</span></a><br>
                        <a class="" href="test8.php?status=12&page=1" id="test8.php?status=12&page=12"><img alt="" ><span style="position: absolute; margin: 5px 0px 0px 5px;">Voce 4</span></a>
                    </div>
            </div>
      
      
      
      
        <script  type="text/javascript">
              $("#submenu_11 a").click(function (e) {
                e.preventDefault();
             // $("#submenu_11 a").click(function() {
                    var param =  $(this).attr("id");
                    $.ajax({
                        type: "GET",
                        url: param ,
                        success: function(response) {
                            $("#panel_container_dx").html(response);              
                        }
                    });
                })
            </script>
          
            <script  type="text/javascript">
              $("#submenu_12 a").click(function (e) {
               // e.preventDefault();
             // $("#submenu_11 a").click(function() {
                    var param =  $(this).attr("id");
                    $.ajax({
                        type: "GET",
                        url: param ,
                        success: function(response) {
                            $("#panel_container_dx").html(response);              
                        }
                    });
                })
            </script>
      
      
      
        <div id="panel_container_dx" class="" style="background-color:grey;">
  
                  
                        <?php
                        $smistatore="";
                        $page="";
                        $smistatore = $_GET['status'];
                        $page = $_GET['page'];
                        if($smistatore == "1" && $page=="1")
                        {
                         ?>
          
                            <p>Ciao1</p>
                  
                      
                        <?php
                        }
              
                        elseif($smistatore == "10" && $page=="1")
              
                        {
                         ?>
      
                            <p>Ciao2 </p>
                    <?php
                            }
                  
                        elseif($smistatore == "11" && $page=="1")
              
                        {
                         ?>
                          
                            <p>Ciao3 </p>
                    <?php
                  
                    }
              
                        elseif($smistatore == "12" && $page=="1")
              
                        {
                         ?>
                          
                            <p>Ciao4 </p>
                    <?php
                    }

                    ?>
                      
          
          
          
            <script  type="text/javascript">

                function gest_submenu(menuid) {
            var panelMenu = document.getElementById("submenu_" + menuid);

                if (panelMenu) {
                    if (panelMenu.style.display == "none") {
                        panelMenu.style.display = "block";
                    } else {
                        panelMenu.style.display = "none";
                    }
                }
            }
          
            </script>          
      
        </div>  
        </div>

</body>
</html>

l anomalia si riscontra con l aggiunta di questa riga

--> e.preventDefault(); <--
presente anche nel post #37 .
In pratica ho creato due menu con rispettivi sottomenu .
nel menu in cui è presente quella riga di script il contenitore di destra genera il contenuto duplicando anche il menu di partenza , nel menu in cui non c'e questa riga tutto nella norma (cioe viene caricato sul contenitore solo il contenuto stesso.
2v3fqdk.jpg

erx304.jpg


Strano questo malfunzionamento
 
Stato
Chiusa ad ulteriori risposte.

Discussioni simili