Loading an external html into a page file using jQuery

345
November 21, 2016, at 7:38 PM

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>

Answer 1

It looks like you are using mismatched quotes:

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

try

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

$(‘#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.

Rent Charter Buses Company
READ ALSO
jQuery animate not scrolling on mobile devices if viewport present (CSS might be the issue)

jQuery animate not scrolling on mobile devices if viewport present (CSS might be the issue)

On my responsive HTML page I have a link which when clicked should scroll down to the bottom of the page. So I added the following code.

415
Iterate over array and filter results down to 10

Iterate over array and filter results down to 10

I'm using the Google Maps Distance Matrix API to search for distances between one city and a lot of other cities, which returns an array that looks like the following:.

295
Changing the background image if window is resized to 800px in width

Changing the background image if window is resized to 800px in width

I'm trying to write code that changes the background-image of the body if the window is resized. My code is below, but it doesn't work.

505