I'm trying to load a local html file into div, but it does seem to work (alert is displayed, but no content is displayed to the page).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=".9.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="blog"></div>
</body>
</html>
Javascript (test.js):
$(document).ready(function(){
$("#blog").load("tester.html", function() {
alert('Load was performed.');
});
});
Loaded HTML file (tester.html):
<p>
The word <strong>hello</strong> should be bold.
</p>
I'm trying to load a local html file into div, but it does seem to work (alert is displayed, but no content is displayed to the page).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="blog"></div>
</body>
</html>
Javascript (test.js):
$(document).ready(function(){
$("#blog").load("tester.html", function() {
alert('Load was performed.');
});
});
Loaded HTML file (tester.html):
<p>
The word <strong>hello</strong> should be bold.
</p>
- Is you #blog div visible? It have width and height? – DontVoteMeDown Commented May 29, 2013 at 18:39
3 Answers
Reset to default 8SOP (Same Origin Policy).
This will not work in Chrome.
Try in Firefox or on Localhost or on an online server.
AJAX cannot work from file:// but http://
I don't know why are you doing this, but i seriously not remend it. Browsers forbid this behaviour for security reasons, you can't load things from the file system.
If you are testing, use somthing like xampp is really easy to set up. It will also give a more real view of how web sites work. If you where actually trying to use this as a real web page, I remend you search another way to do it.
Actually, if you just want to make a test for a image, I do suggest that you can use an relative path to refer to the image. For example:
cp ~/1.png ~/Workspace/html/app/1.png
vim ~/Workspace/html/app/test.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="border-radius: 5px; border: 0px;">
<img src="test.jpg">
</body>
</html>