includere navbar in una pagina html con jquery

**Cloth** · 24-01-2016, 13:38

Ciao ho provato a fare qualche ricerca all'interno della sezione prima di postare, spero di non essermi perso un post sull'argomento.
Ho creato una pagina html che comprende un semplice menu di navigazione e ho pensato di separare il codice del menu di navigazione dal resto delle pagine html, importandolo tramite una qualche funzione. Ho fatto qualche ricerca in rete e ho visto che è possibile farlo tramite Jquery eppure non capisco quale errore banale io stia commettendo. Potreste spiegarmi dove sto sbagliando?

La pagina index:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script >

$(document).ready(function() {
    $('#navi').load('navi.html');
});

</script>

<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>

<div id="#navi"></div>

</body>
</html>

La pagina di navigazione:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ul id="nav" >
   <li class="current"><a href="index.html">Home</a></li>
   <li><a href="#">Multi-Levels</a>
      <ul>
         <li><a href="#">Team</a>
            <ul>
               <li><a href="#">Sub-Level Item</a></li>
               <li><a href="#">Sub-Level Item</a>
                  <ul>
                     <li><a href="#">Sub-Level Item</a></li>
                     <li><a href="#">Sub-Level Item</a></li>
                     <li><a href="#">Sub-Level Item</a></li>
                  </ul>
               </li>
               <li><a href="#">Sub-Level Item</a></li>
            </ul>
         </li>
         <li><a href="#">Sales</a></li>
         <li><a href="#">Another Link</a></li>
         <li><a href="#">Department</a>
            <ul>
               <li><a href="#">Sub-Level Item</a></li>
               <li><a href="#">Sub-Level Item</a></li>
               <li><a href="#">Sub-Level Item</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#">Contact Us</a></li>
</ul>
</html>

Ho forse fatto un errore nella pagina navi.html?

**MAeSI** · 24-01-2016, 15:40

Ciao, l'errore è qui:

codice HTML:

<div id="#navi"></div>

Rimuovi il cancelletto.

Inoltre, nella pagina navi.html lascerei solo l'elemento ul

**Cloth** · 24-01-2016, 17:11

Originariamente inviata da MAeSI

Ciao, l'errore è qui:

codice HTML:

<div id="#navi"></div>

Rimuovi il cancelletto.

Inoltre, nella pagina navi.html lascerei solo l'elemento ul

Ho appena applicato i passaggi che mi hai suggerito ma continuo ad avere una pagina bianca

**Vincent.Zeno** · 24-01-2016, 17:47

assicurati che il file navi.html sia nella stessa cartella di index, altrimenti devi specificare il percorso corretto.

lo script funziona, dev'essere solo un problema di nomi o percorsi

**Cloth** · 24-01-2016, 18:04

Originariamente inviata da Vincent.Zeno

assicurati che il file navi.html sia nella stessa cartella di index, altrimenti devi specificare il percorso corretto.

lo script funziona, dev'essere solo un problema di nomi o percorsi

Sono nella stessa cartella perche sto facendo una prova a parte. Ho provato anche a dare un percorso assoluto ma la pagina rimane bianca..

**Vincent.Zeno** · 24-01-2016, 18:15

controlla bene nomi e id,
magari facci vedere cosa hai scritto.

e assicurati di chiamare i file corretti e aggiornati: spesso capita di fare prove su file "errati"

**MAeSI** · 24-01-2016, 18:41

@Cloth

Aggiungo a quanto scritto da Vincent.Zeno: se stai provando in locale con Chrome non funziona; online funziona anche con Chrome.

**Cloth** · 24-01-2016, 21:35

Originariamente inviata da MAeSI

@Cloth

Aggiungo a quanto scritto da Vincent.Zeno: se stai provando in locale con Chrome non funziona; online funziona anche con Chrome.

Penso che tu abbia fatto centro io sto eseguendo in locale proprio con Chrome, ma non vedo differenze neanche con Firefox. Perchè non dovrebbe funzionare?

**Cloth** · 24-01-2016, 22:40

Rettifico quello che ho detto, con Firefox in locale funziona, con Chrome no. Qualcuno può spiegarmi il motivo?

Allego i miei 2 file aggiornati e funzionanti con Firefox:

Index.html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script >
 
$(document).ready(function() {
    $('#navi').load('navi.html');
});


</script>


<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>


<div id="navi"></div>


</body>
</html>

Navi.html

codice:

<ul id="nav" >
	<li class="current"><a href="home.html">Home</a></li>
	<li><a href="#">Multi-Levels</a>
		<ul>
			<li><a href="#">Team</a>
				<ul>
					<li><a href="#">Sub-Level Item</a></li>
					<li><a href="#">Sub-Level Item</a>
						<ul>
							<li><a href="#">Sub-Level Item</a></li>
							<li><a href="#">Sub-Level Item</a></li>
							<li><a href="#">Sub-Level Item</a></li>
						</ul>
					</li>
					<li><a href="#">Sub-Level Item</a></li>
				</ul>
			</li>
			<li><a href="#">Sales</a></li>
			<li><a href="#">Another Link</a></li>
			<li><a href="#">Department</a>
				<ul>
					<li><a href="#">Sub-Level Item</a></li>
					<li><a href="#">Sub-Level Item</a></li>
					<li><a href="#">Sub-Level Item</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Contact Us</a></li>
</ul>

**MAeSI** · 24-01-2016, 22:57

Originariamente inviata da Cloth

[...] con Chrome no. Qualcuno può spiegarmi il motivo?

Credo sia una questione di sicurezza:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Discussione: includere navbar in una pagina html con jquery

Strumenti discussione

Ricerca discussione

Visualizza

includere navbar in una pagina html con jquery

Tag per questa discussione

Permessi di invio