Aprire link ad un pagina in un div senza refresh

albertusa · 9 Set 2014

... 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>

Dorothea · 21 Lug 2016

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!

Max 1 · 21 Lug 2016

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

Dorothea · 21 Lug 2016

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)

Dorothea · 21 Lug 2016

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.

Max 1 · 21 Lug 2016

Ma a te così come è quell'elenco funzione come link

Dorothea · 21 Lug 2016

Funziona e fa quello che vorrei. Solo che invece di un elenco, vorrei che ci fossero delle immagini.

Max 1 · 21 Lug 2016

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

Dorothea · 21 Lug 2016

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?

Max 1 · 21 Lug 2016

criric ha scritto:

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

criric · 21 Lug 2016

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.

Dorothea · 21 Lug 2016

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 1 · 21 Lug 2016

Dorothea ha scritto:
.....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!

criric · 22 Lug 2016

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");

micha93 · 2016-08-01T12:28:03+0200

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

micha93 · 2016-08-02T01:32:49+0200

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 ..

criric · 2016-08-02T17:26:24+0200

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

micha93 · 2016-08-02T17:32:10+0200

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

criric · 2016-08-02T17:35:13+0200

esatto

micha93 · 2016-08-02T18:33:42+0200

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.

Strano questo malfunzionamento

Aprire link ad un pagina in un div senza refresh

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Super Moderatore

Nuovo Utente

Super Moderatore

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Discussioni simili

Privacy & Transparency

Privacy & Transparency