2

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!

Emre Erkan
  • 8,433
  • 3
  • 48
  • 53
Josue
  • 725
  • 2
  • 10
  • 22
  • 3
    You will still need to run this on a webserver (e.g. localhost) because it loads data from a server using XMLHttpRequest 'Load data from the server and place the returned HTML into the matched element.' – David Dec 13 '11 at 09:13

5 Answers5

2

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');
});
Shea
  • 1,965
  • 2
  • 18
  • 42
  • 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. – Shea Dec 14 '11 at 10:20
1

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

Max
  • 8,671
  • 4
  • 33
  • 46
  • 2
    Same goes for Node.js; install `http-server` with `npm` then run `http-server` from anywhere. – bennedich Dec 13 '11 at 10:12
  • @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. – Max Dec 13 '11 at 10:43
  • @Max you're assuming he even has Python in the first place, which is not easy at all to mess around with. – Shea Dec 14 '11 at 10:15
0

It sounds like the problem is that the jQuery library isn't loading when you're running on localhost, or the AJAX request is failing for the same reason. This is due to protection built into the browser to prevent cross-site scripting.

See this "additional note" from the documentation for load:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

If you use any AJAX, you'll have to run this on a local web server. In which case you should just run this page from your local webserver rather than from the filesystem. Then you won't need any workarounds.

If you're on Windows, you could use UniServer.

If you aren't going to use any AJAX whatsoever (aren't using load), then you could write your code so that it falls back to a local version of jQuery if the remote version didn't load.

Here's an example of how, grabbed from this page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/Scripts/lib/jquery/jquery-1.4.4.min.js"></script>'))</script>

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>!window.jQuery.validator && document.write('<script src="/Scripts/lib/jquery/jquery.validate.min.js"></script>')</script>

<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>!window.jQuery.validator.unobtrusive && document.write('<script src="/Scripts/lib/jquery/jquery.validate.unobtrusive.min.js"></script>')</script>
Merlyn Morgan-Graham
  • 58,163
  • 16
  • 128
  • 183
0

Most browsers will, by default, block this on a local file system as a security precaution. Have you tried it on a remote server?

landons
  • 9,502
  • 3
  • 33
  • 46
0

I dont know much on jQuery. But still, you can do this, by loading the page1.html to a hidden iframe, then get the document.body.innerHTML of this page, and then append that node to the div you need. Its only HTML DOM in JavaScript.

But performance base, loading an iframe is always a costly one. This would do your job. However there may be many solutions in jQuery or other libraries, Sorry i don't know much on it.

Kris
  • 8,680
  • 4
  • 39
  • 67