How to include an HTML file with jQuery?

Question

I want to make my code separate so I decided to divide each div to html files. Each HTML file has some jQuery click events. I have 2 files index.html and menu.html.

Problem is that I have to include the jQuery library in both files to make it work.

Is there any way that I can include library one time and have it work on both files? I tried to include the library in the index page only, but then the menu click doesn't work.

I included the menu.html file through an iframe.

<iframe src="left-menu.html"></iframe>

Boaz · Accepted Answer · 2013-12-02T22:49:13.470

42

You can add menu.html into the DOM of index.html with the jQuery load() method. This way the jQuery instance created in index.html would also apply to the content loaded from menu.html.

For example in index.html you can do:

$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});

Note how $('#some-menu') is just another element in index.html into which we load the contents of menu.html. It's also important to note that because of the same-origin-policy, the AJAX request performed as part of the load() method would only work with files in the same domain, protocol and port (unless you're using CORS).

edited Dec 02 '13 at 22:49

answered Mar 10 '13 at 09:38

Boaz

19,892
8
62
70

this would be a cleaner solutions as opposed to using iframes – xtds Mar 10 '13 at 09:40
@Joji This still seems to work. See example here: https://jsfiddle.net/n492fgd3/ You might be encountering a CORS error. Please check for errors. – Boaz Jul 16 '19 at 08:01

Shane · Answer 2 · 2017-12-05T15:33:34.063

In your HTML:

<body>
<header>
     <div data-includeHTML="_HeaderPartial.html"></div>
</header>
<main>
    <div>
        This is the main content, from the index file
    </div>
</main>
<footer>
    <div data-includeHTML="_FooterPartial.html"></div>
</footer>
<script>
    $(document).ready(function () {
        $("div[data-includeHTML]").each(function () {                
            $(this).load($(this).attr("data-includeHTML"));
        });
    });
</script>
</body>

In a separate file "_HeaderPartial.html":

<div>
    <h1>This is the Header from its _Partial file</h1>
</div>

In a separate file "_FooterPartial.html":

<strong>And this is from the footer partial file</strong>

The result:

This is the Header from its _Partial file

This is the main content, from the index file

And this is from the footer partial file

score 4 · Answer 3 · edited Nov 14 '14 at 07:26

I have another solution. It seems to make code more beautiful and shorter. First define include function.

var include = function(beReplacedId,url){
jQuery.get(url,function(data){
    jQuery(beReplacedId).replaceWith(data);

});

}

On html page use onload to trigger include like this.

<img id="partTopicDetail" onload="include(this,this.id+'.html')" src="img/any-image.png" >

After the compiler runs through it will replace img tag and load what you need. With above trick i can attach to any place in my index.html

How to include an HTML file with jQuery?

3 Answers3

This is the Header from its _Partial file

Linked