Problema apertura link

[marcoint]

Salve a tutti, sto svolgendo un importante progetto a scuola che prevede la creazione di un sito per un tour operator utilizzando qualsiasi linguaggio a nostra disposizione (html,php,java,e css). Anche se non li abbiamo studiati tutti il professore ci ha dato libera scelta. Io mi sono creato il layout del sito tramite css quindi creando un HEADER della pagina una SIDEBAR con dei link, una parte MAIN ed un FOOTER. Adesso vorrei sapere come si può fare, in qualunque modo e con qualunque linguaggio a far aprire la pagina dei link sulla sinistra nella porzione <div class=main> della pagina. Il professore mi aveva suggerito la PHP_SELF anche se approfondendo in tal senso non sono riuscito a fare un bel niente..

Grazie a chiunque mi aiuterà, ripeto il metodo da utilizzare è qualsiasi così come il linguaggio anche se è preferibilmente html-php
Metto una foto per far capire quello che voglio fare. Per qualsiasi dubbio sulla domanda sono disponibile qui o via mp, per piacere aiutatemi

 

[criric]

Ciao e Benvenuto
Il mio consiglio è quello di utilizzare la tecnologia ajax : cambi il contenuto del div senza ricaricare la pagina
qui trovi un semplice esempio
Se vuoi usare anche php ricordati che l'estensione delle pagine deve essere .php : quella che hai postato è .htm

 

[marcoint]

Ciao e Benvenuto
Il mio consiglio è quello di utilizzare la tecnologia ajax : cambi il contenuto del div senza ricaricare la pagina
qui trovi un semplice esempio
Se vuoi usare anche php ricordati che l'estensione delle pagine deve essere .php : quella che hai postato è .htm

Si grazie mille per la risposta hai capito perfettamente cosa intendevo. Ho visto però che il metodo che suggerisci lì prevede javascript linguaggio che ho fatto poco e niente quindi non so se saprei giostrarmi per utilizzare al meglio il sito. Tengo ovviamente in considerazione la proposta e nel caso non ce ne siano altre proverò ad utilizzarla. Aspetto comunque qualche altra proposta semplice ed efficace, sbizzarritevi. Per quanto riguarda il fatto del .htm era solo per far vedere il layout del sito e cosa avevo in mente di fare, non ho ancora implementato niente di php.
PS: nel frattempo provo ad utilizzare il tuo metodo

 

[marcoint]

Il mio menu è questo:

<!--SIDE BAR-->

<div class="sidebar">
<p align=center><a href="#">Menu principale: </a></p>
&raquo; <img src="Home.png" height=33 width=33 align=center>   <a href="#">Home</a> 
<br><br>
&raquo;   <img src="albergo.gif" height=23 width=23  id="immaginimenu" align=center>   <a href="menucomuni.htm">Alberghi</a>
<br><br>
&raquo; <img src="agriturismo.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Agriturismi</a>
<br><br>
&raquo; <img src="ristorante.jpg" height=24 width=24  id="immaginimenu" align=center> <a href="#">Ristoranti</a>
<br><br>
&raquo; <img src="bedandbreackfast.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Bed&Breackfast</a>
<br><br>
&raquo; <img src="lowcost.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Vacanze Low Cost</a>
<br><br>
&raquo; <img src="fivestars.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Vacanze a 5 stelle</a>
<br><br>
<hr>
<p align=center><a href="#">Conosci la città:</a></p>
&raquo; <img src="map.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Mappa Città</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  id="immaginimenu" align=center> <a href="#">A piedi nella storia</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  id="immaginimenu" align=center> <a href="#">Le Tradizioni</a>
<br><br>
&raquo; <img src="tufo.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Un tufo nel passato</a>
<br><br>
</div>

E su ogni link ci vorrei fare la chiamata ajax nel div content.

 

[flameseeker]

Con il selettore di jquery selezioni tutti i link sotto sidebar e poi imposti la richiesta.

Un esempio:

// assegno un evento sulla pressione di uno qualsiasi dei link del menù
$('.sidebar a').click(function(e){
    // prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
    e.preventDefault();

    // effettuo invece una richiesta in ajax grazie a quella url
    $.get($(this).attr('href'))
        .done(function(data) {
            // in caso di riuscita scrivo il responso nel div main
            $('.main').html(data);
        });

});

 

[criric]

Aggiungo allo script di flameseeker un paio di correzioni sull HTML
script completo

<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script  type="text/javascript">
            $(document).ready(function() {
                // assegno un evento sulla pressione di uno qualsiasi dei link del menù
                $('.sidebar a').click(function(e) {
                    // prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
                    e.preventDefault();
                    // effettuo invece una richiesta in ajax grazie a quella url
                    $.get($(this).attr('href')).done(function(data) {
                        // in caso di riuscita scrivo il responso nel div main
                        $('.main').html(data);
                    });
                });
            });

        </script>
        <style type="text/css">
            .sidebar {
                float:left;
                width: 220px;
                background-color: #999;
            }
            .main {
                float:left;
                width: 620px;
                background-color: #999;
            }
            img.immaginimenu {
                height:23px;
                width: 23px;
            }
        </style>
    <body>
        <div class="sidebar">
            <p align=center>
                <a href="#">Menu principale: </a>
            </p>
            <!-- l'attributo alt per le immagini è obbligatori  -->
            <!-- non puoi assegnare lo stesso id a piu di un elemento nella stessa pagina  -->
            &raquo; <img src="Home.png" class="immaginimenu" alt="home"/>   
            <a href="home.html">Home</a> 
            <br/><br/>
            &raquo;   <img src="albergo.gif"  class="immaginimenu" alt="albergo">   
            <a href="alberghi.html">Alberghi</a>
        </div>
        <div class="main">

        </div>
    </body>
</html>

ovviamente nella stessa cartella dovrai avere i file home.html , alberghi.html etc etc

 

[marcoint]

Ragazzi grazie mille però applicando il codice al sito praticamente non funge. Cioè la pagina prova1.html la apre in una scheda nuova. Magari vi posto il codice forse riuscite a trovare l'errore, grazie per tutto quello che fate. PS: Volevo chiedere se con questo modo delle chiamate ajax fosse possibile aprire nel <div class=main> della mia INDEX.HTML una PAGINA.PHP e di conseguenza lavorarci sopra.

<html>
<head>
<title> Progetto></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="stylemasonery2.css">

<!--SCRIPT AJAX-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script  type="text/javascript">
            $(document).ready(function() {
                // assegno un evento sulla pressione di uno qualsiasi dei link del menù
                $('.sidebar a').click(function(e) {
                    // prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
                    e.preventDefault();
                    // effettuo invece una richiesta in ajax grazie a quella url
                    $.get($(this).attr('href')).done(function(data) {
                        // in caso di riuscita scrivo il responso nel div main
                        $('.main').html(data);
                    });
                });
            });

        </script>
</head>

<body>
<div class="content">

<!--HEADER DELLA PAGINA-->

<div class="header">
<img src="logo.png" width=380 height="100%" id="titolo"> 
<br><br><br>
<blockquote id="citazione">" Non esiste vento favorevole per <br>il marinaio che non sa dove andare "<br> Seneca</blockquote>
<form id="search-btn" action="" method="get">
		
		    
			
		
	             <input type="text" name="q" id="q" />
	             <input type="image" src="search.png" name="search-glass" id="search-glass" alt="Search" />
			
		
		</form>



</div>

<!--SIDE BAR-->

<div class="sidebar">
<p align=center><a href="#">Menu principale: </a></p>
&raquo; <img src="Home.png" height=33 width=33 align=center>   <a href="#">Home</a> 
<br><br>
&raquo;   <img src="albergo.gif" height=23 width=23  class="immaginimenu" align=center>   <a href="menucomuni.htm">Alberghi</a>
<br><br>
&raquo; <img src="agriturismo.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Agriturismi</a>
<br><br>
&raquo; <img src="ristorante.jpg" height=24 width=24  class="immaginimenu" align=center> <a href="prova1.html">prova1</a>
<br><br>
&raquo; <img src="bedandbreackfast.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Bed&Breackfast</a>
<br><br>
&raquo; <img src="lowcost.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Vacanze Low Cost</a>
<br><br>
&raquo; <img src="fivestars.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Vacanze a 5 stelle</a>
<br><br>
<hr>
<p align=center><a href="#">Conosci la città:</a></p>
&raquo; <img src="map.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Mappa Città</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  class="immaginimenu" align=center> <a href="#">A piedi nella storia</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  class="immaginimenu" align=center> <a href="#">Le Tradizioni</a>
<br><br>
&raquo; <img src="tufo.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Un tufo nel passato</a>
<br><br>
</div>
<!--CONTENUTI PRINCIPALI-->

<div class="main">
<strong><p id="titolo">La città di Matera</p></strong>
<div id="container" class="cols">
    <div class="box twelve"></div>
    <div class="box eleven"></div>
    <div class="box ten"></div>
    <div class="box nine"></div>
    <div class="box eight"></div>
    <div class="box seven"></div>
    <div class="box six"></div>
    <div class="box five"></div>
    <div class="box four"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box one"></div>
</div>
</div>


<!--FOOTER-->


<div class="footer">
<div class="copyright">
 <a href="#">Contattaci</a> <br>
[| <a href="#">Home Page</a> | <a href="#">Faq</a> | <a href="#">Crediti</a> | <a href="#">Chi siamo?</a> |]<br>
©2013 Tutti i diritti riservati. Vietato utilizzare informazioni previa autorizzazioni di <a href="#">Sassi e Secoli.it</a></div>
</div>
</div>

 

[criric]

la pagina prova1.html la apre in una scheda nuova.

A me funziona, sicuro di aver incluso la libreria jquery? sei collegato a internet quando provi?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

fosse possibile aprire nel <div class=main> della mia INDEX.HTML una PAGINA.PHP

Certo , cambi lestensione nel link

<a href="prova1.php">Prova 1</a>

PS: sposto la discussione in jquery

 

[marcoint]

Non so cosa vuol dire aver incluso la libreria jquery.. Il codice è quello che vedi li..
Si sono connesso ad internet e la

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

mi sembra di averla messa nello script ajax.

 

[criric]

il codice che hai postato funziona , non capisco perchè a te non va. Hai un esempio online da postare o stai lavorando in locale?

 

[marcoint]

Sto lavorando in locale... Comunque ripeto che lo apre su un'altra finestra.. Magari vi posto il css forse gli errori sono lì..

body {font-family: Centaury Gothic, Arial;
       background-image: url(sfondo.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100%;

      margin:0 auto;
      }

.content { width: 910px;
           margin: 20px auto 0px auto;
           text-align:center;
          } 

.header{ margin: 0 auto;
         height : 140px;
         background-color: #999999;
         border: 1px dashed #666666;
         font-size: 18px;
         color: #333333;
        }

img#titolo{float:left;
           margin: 0 auto;
           clear:both;
          }

#citazione {text-align:right;
            font: italic 16px arial, sans-serif;
             float:right;
             margin: auto 15px 0 auto;
              }

#inlineimage { position: absolute;
               top : 70px;
               right: 70px;
               width : 300px;
}
 
#search-btn   { position: absolute;
	display: block;
	top: 33px;
	right: 350px;
        margin: 0;
}     
 #search-glass   { position: absolute;
	display: block;
	top: 5px;
	right: 5px;
        margin: 0;
}     



.sidebar {  width: 200px;
           float: left;
           text-align: left;
           padding: 10px;
           background-color: #999999;
           border: 1px dashed #666666;
           font-size: 18px;
           color: #333333;
           margin: 8px auto 5px auto;
         }

.immaginimenu{ margin-right: 7px;
               margin-left: 7px;    }

.main {    width: 680px;
           float: right;
           background-color: #999999;
           border: 1px dashed #666666;
           font-size: 22px;
           color: #333333;
           margin: 8px auto 5px auto;
}

p#titolo{font-size:45px;
text-shadow: -1px -1px 0 #0099ff, 1px -1px 0 #0099ff, -1px 1px 0 #0099ff, 1px 1px 0 #0099ff;
margin-top:7px;
}

a:link {
	color: black;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}
a:hover { 
          font-weight:bold;
	  text-decoration: underline;
}

.footer { padding: 0,5em;
          width: 910px;
          background-color: #000;
          position:relative;
          bottom: 0;
          margin: 30px auto auto auto;
           background-color: #999999;
           border: 1px dashed #666666;
           text-align:center;
           clear: both;
}

.copyright { font-size: 15px:
             font-style: italic;
             text-align : center;
           }

 

[criric]

Il css non c'entra, ho copiato e incollato il codice che hai scritto su una pagina online, guarda qui
come puoi vedere se premi su "prova1" cambia il contenuto del div come volevi
Il perchè a te non funziona non lo so
forse non ha salvato la pagina o non hai copiato tutto il codice, non saprei
al massimo puoi usare firefox e installarti l'estensione firebug e da li capire quale puo essere il problema

 

[marcoint]

Allora copiando ed incollando la sorgente della tua pagina online in un nuovo documento e creando una pagina1.html nuova, praticamente con internet explore non fa nulla di nulla e su prova1 rimanda su un'altra scheda mentre aprendo con google chrome i link inattivi ( quelli con HREF="#") li apre sulla stessa pagina, mentre su prova1 all'evento click non succede nulla. Come caspita è possibile
PS: Ovviamente grazie per tutto il tempo che stai perdendo con me

 

[marcoint]

La cosa strana è che un altro mio amico provando online il codice, funziona. Mentre io che lavoro in locale ed un altro amico mio che lavora in locale a cui ho passato lo stesso codice, ha gli stessi miei problemi. Ma non sarà che la chiamata ajax non funziona in locale?

 

[marcoint]

Ok ho risolto. Mettendolo online su altervista funziona. Solo una cosa non riesco a fare. Praticamente se clicco su home anche la home mi si aprirà nel div main. Come faccio invece a ritornare alla pagina iniziale?

 

[criric]

Ma non sarà che la chiamata ajax non funziona in locale?

no non può essere, ma , non me lo spiego

Come faccio invece a ritornare alla pagina iniziale?

puoi provare modificando questa riga

$('.sidebar a').click(function(e) {

cosi

$('.sidebar a').not(":first").click(function(e) {

dovrebbe saltarti il primo link ma non ho testato

prova anche cosi

$('.sidebar a').click(function(e) {
       if ($(this).attr('href') == "home.html") {
             return;
       }
etc .etc.

 

[marcoint]

Fatto nel secondo modo e funziona. Comunque per far si che tutti i link della pagina si aprano nel <div main> tranne la home bisognerebbe modificare tutto lo script ajax?
Ovviamente grazie sempre per l'aiuto

 

[criric]

scrivendo cosi

$('.sidebar a').click(function(e) {

ti riferisci a tutti i tag <a> del div con classe sidebar
se invece scrivi

$('a').click(function(e) {

ti riferirai a tutti i tag <a> in generale, ma non potrai avere link esterni se non specificati come la home.html

 

[marcoint]

Perfetto ho capito. Grazie di tutto