jquery .load() to include an html file into another not working

Question

My goal: Include one html file (the header of my website) into many other html files (each page of my website).

I do not want to copy and paste my header html into each of my websites pages. When I want to change my header html, I do not want to have to go through each webpage and change all the headers.

My current (not working) solution: Use jquery's .load() function to load my header html into a div. My code:

header.html:

<h1>I am a header</h1>

index.html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script> 
            $(function(){
                $("#header").load("header.html"); 
            });
        </script> 
    </head>
    <body>
        <div id="header"></div>
    </body>
</html>

This is very similar to so questions like this one, yet my code still does not work. Could it have something to do with the fact that this is all being rendered by django's templating engine? header.html is in the same directory as index.html

inspect the actual request itself in browser dev tools. Curious why you don't just do a server side include?? — charlietfl, Jun 30 '15 at 19:01
Why do you want to do this with jQuery? That has all sorts of issues - load, JS availability, accessibility. But Django's template system is *explicitly* made to enable you to do this, via blocks and inheritance. That is the way to do it. — Daniel Roseman, Jun 30 '15 at 19:01
blex: yes. Daniel: can you suggest another way to accomplish my goal other than jquery? googling "include html into another html file" gives me mainly jquery answers — David, Jun 30 '15 at 19:03
You need to read the [template documentation](https://docs.djangoproject.com/en/1.8/topics/templates/). As I say, this is an explicit goal of *any* templating system; in Django's version, you put the header in a base HTML file, and all the templates extend from that. — Daniel Roseman, Jun 30 '15 at 19:07

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

I extend what Daniel already said.

first read the django documentation

say you have base.html where you store the header part which should appear in all pages, and you have detail.html which needs to handle some other parts

so, base.html:

<!doctype html>
<html lang="en">
    <head>
       stuff that appears in all pages
    </head>
    <body>
       {% block body %}{% endblock %}
    </body>
</html>

and your detail.html would look like:

{% extends 'base.html' %}
{% block body %}
   stuff that shows up only in detail.html
{% endblock %}

thats it, your detail.html will have everything base.html has plus the things you write into body block.

hope, this helps

score 0 · Answer 2 · answered Jun 30 '15 at 19:15

Your Code should be working, but if it is in Chrome, it might have some problem with file access.

You can try using firefox, or stick on Chrome but open it with arguments --args --allow-file-access-from-files.

If this still not working, pls append on the console output so it's more easy to diagnose.

jquery .load() to include an html file into another not working

2 Answers2