Databases
StackOverflow2013
Postsdbo
POjQuery.load to load HTML file
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery.load to load HTML file
    text
    copied!<p>I've <strong>never</strong> used <a href="http://api.jquery.com/" rel="nofollow noreferrer">jQuery</a> before this, but I'll explain what I'm trying to do.</p> <p><strong>index.html</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;My Awesome Website&lt;/title&gt; &lt;link href="style.css" rel="stylesheet" type="text/css"/&gt; &lt;link rel="shortcut icon" href="/favicon.ico" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- &lt;iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"&gt;&lt;/iframe&gt; I used to use this - but i cant have dropdown menus. --&gt; &lt;!-- This is my problem --&gt; &lt;script&gt; $('#navbar').load('./navbar.html'); &lt;/script&gt; &lt;noscript&gt; &lt;h1&gt;Please enable Javascript!&lt;/h1&gt; &lt;/noscript&gt; &lt;div id="container"&gt; &lt;!-- Content Here --&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>navbar.html</strong></p> <pre><code>&lt;div id="navbar"&gt; &lt;li&gt;&lt;object width="64" height="64" data="favicon.svg" type="image/svg+xml"&gt;&lt;/object&gt;&lt;/li&gt; &lt;li&gt;&lt;object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"&gt;&lt;/object&gt;&lt;/li&gt; &lt;li&gt;&lt;object width="64" height="64" data="icons/games.svg" type="image/svg+xml"&gt;&lt;/object&gt;&lt;/li&gt; &lt;li&gt;&lt;object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"&gt;&lt;/object&gt;&lt;/li&gt; &lt;/div&gt; </code></pre> <p>So what I'm trying to do here, is have many HTML pages which all <em>link</em> to one navbar html page, so when I change the navbar.html, I dont have to change every page.</p> <p>I already have another question <a href="https://stackoverflow.com/questions/16371798/html-persistance-navbar">here</a>. <a href="https://stackoverflow.com/users/1338290/davor-mlinaric">Davor Milnaric</a> suggested "if you are using jquery, you can try with '.load()' function. api.jquery.com/load" but I can't get it to work. What am I doing wrong? How do I fix it? Any help would be much appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload