Get HTML code of a local HTML file in Javascript

Question

I'm developing a small application with HTML, CSS, Javascript, JQuery and JQTouch.

This is a LOCAL application. I've an index.html with some div's. When I click on a link in this file, I want to load HTML code of page1.html (same folder) and insert into a div of index.html the tag that I want of page1.html.

Example: Inject the content of (page1.html) into (index.html).

I try: http://api.jquery.com/load/

$('#loadContent').load('page1.html #test');

And the content of loadContent doesn't change. I include JQuery script into index.html...

I try http://api.jquery.com/html/ too, but I think it connect to the server.

Any idea? Thanks!

Solution 1

Make sure you're calling it after loadContent has been created. The following will run your load code when the document is ready to be written to.

$(function() {
$('#loadContent').load('page1.html #test');
});

Solution 2

Or you could run a local server. If you have python you can go to your directory with the files and run python -m SimpleHTTPServer for python 2.7 or python -m http.server for python 3.x

Comments

[bennedich]

Same goes for Node.js; install http-server with npm then run http-server from anywhere.

[Max]

@andrewjackson, I don't think installing wampserver is easier than running 1 line in a command prompt. However, many people do not feel comfortable at the command prompt and navigating to a directory and whatnot, so I guess wampserver is also a good suggestion.

[Shea]

@Max you're assuming he even has Python in the first place, which is not easy at all to mess around with.

[Shea]

It's been stated, XMLHttpRequest must be used in conjunction with an HTTP web server. I recommend to install WAMP, with installs and configures Apache, PHP, and Mysql. If you were able to make Ajax calls to a local file, it would be a massive security flaw.