Loading an external html into a page file using jQuery

Question

I'm trying to externalize the header section (which will change often) as it's own HTML file, and use jQuery to load it with the .load function. I have saved the file to be used in a separate folder and load the element FIRST, then the script (I have declared jQuery 1.10 btw)

Here is the code: in the page where I want it to go:

<div id="header"></div>
<script type="text/javascript">
$(document).ready(function(){        
$(‘#header').load(‘externals/header.html'); 
});
</script>

and the file is in a folder called 'externals'

However the page does not load the header. Here is the page code, for what that's worth:

  <div class="logo">
    <h1><a href="../index.html"> <img src="../images/logo.png" alt="Whitehouse Dezigns - Custom Built Streetrods"></a></h1>
</div>

    <div class="head-icon">
        <a href="https://www.facebook.com/whitehousedezigns" class="head-icon-01" target="_blank"></a>
        <a href="http://instagram.com/whitehouse_dezigns" class="head-icon-02" target="_blank"></a>
        <a href="https://youtube.com/channel/UC7zCRezIASm4EaZLM_ADn3w" class="head-icon-03" target="_blank" target="_blank"></a>
        <div class="clear"></div> 
    </div>

      <nav>
          <ul class="sf-menu">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="../about.html">About Us</a></li>
            <li><a href="../services.html">Services</a></li>
            <li><a href="../gallery.html">Gallery</a></li>
            </li>

          </ul>
          <div class="clear"></div> 
      </nav>

      <div class="clear"></div>
 </div>

I did a quick check and I think the answer is in another post. http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-jquery-ajax — Tom, Sep 25 '15 at 20:23
U need to apply data somewere. See documentation: http://api.jquery.com/load/. I dont see anywere #header here. — Jędrzej Chałubek, Sep 25 '15 at 20:24

score 0 · Accepted Answer · answered Sep 25 '15 at 20:26

0

It looks like you are using mismatched quotes:

$(‘#header').load(‘externals/header.html');

try

$('#header').load('externals/header.html');

answered Sep 25 '15 at 20:26

superUntitled

22,351
30
83
110

score 0 · Answer 2 · answered Sep 25 '15 at 20:27

0

$(‘#header').load(‘externals/header.html'); and $('#header').load('externals/header.html');

Are not the same thing. Apostrophe vs single quote.

If it is still not working check your console for 404 errors. Based off the value you are passing to load it doesn't seen that it's a cross domain issue.

answered Sep 25 '15 at 20:27

Sean Wessell

3,490
1
12
20

yes because I had written this a while ago, saved it to my email as I mailed it to myself, then retrieved it with a copy/paste - and the character formatting was wrong I guess. – Sep 25 '15 at 20:57

Loading an external html into a page file using jQuery

2 Answers2