Load HTML Snippets into DOM

Question

I'm trying to come up with the best way to maintain a site with lots of pages, and I've opted to create separate HTML files for "common" HTML elements like the header and footer.

Currently, my index.html page is set up like this, where the jQuery function is supposed to inject the contents of text.html into the footer div.

<html>
<head>
<title>Test Site</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
      $("#footer").load("text.html");
    });
</script>
</head>
<body>
    <div id="footer"></div>
</body>
</html>

The contents of text.html are:

<div style="red">
    Hello, world!
</div>

This doesn't seem to work and i am getting following error

XMLHttpRequest cannot load file:///Users/Jon/Desktop/text.html. Origin null is not allowed by Access-Control-Allow-Origin

Question: Is this possible via jQuery, or do I have to use PHP/something else? I know that Wordpress does something similar, but I'm pretty sure they use PHP. This method will be very sustainable if I can get it to work.

There is no need any server side language like PHP to do this. Do you have any error in console? — , May 15 '13 at 03:31
what error are you getting ? try `$("#footer").load("text.html", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); }` — NullPoiиteя, May 15 '13 at 03:32
XMLHttpRequest cannot load file:///Users/Jon/Desktop/text.html. Origin null is not allowed by Access-Control-Allow-Origin. — Jon, May 15 '13 at 03:34

score 0 · Accepted Answer · edited May 23 '17 at 11:46

You can't load file:// URLs in most browsers via AJAX requests or you will get Origin null is not allowed by Access-Control-Allow-Origin. I believe Firefox will let you, but Chrome/Safari don't. ( See Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 for more)

The easiest thing is to run a local webserver, then you won't get that error.

Also, in terms of what you are doing, there are much nicer libraries to do this than jQuery. I'm using https://github.com/linkedin/dustjs/wiki/Reusable-UI-Dust-modules - which is similar to How to define mustache partials in HTML? - both have partials/includes of other files. You could also look at http://pagerjs.com/

One other project worth checking out is http://docpad.org/ - which will also install a webserver for you. Once you are finished working on a site, you can generate static HTML from all the parts.

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

you dont need server-side language

in replay to your error message described in comment

XMLHttpRequest cannot load file:///Users/Jon/Desktop/text.html. Origin null is not allowed by Access-Control-Allow-Origin

you need a native web server setup, and running it by calling your localhost or 127.0.0.1

Good Read

Jquery: Running AJAX locally without a webserver

edited May 23 '17 at 12:00

Community

1
1

answered May 15 '13 at 03:36

NullPoiиteя

56,591
22
125
143

Load HTML Snippets into DOM

2 Answers2