CODEWITHSUNDEEP
javascriptjqueryhtml
Mushy
Mushy

Reputation: 172

Loading local html file into div

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.com/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>

Upvotes: 5

Views: 12712

Answers (3)

Binhong Wu
Binhong Wu

Reputation: 61

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>

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 206363

SOP (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://

Upvotes: 8

Nickydonna
Nickydonna

Reputation: 802

I don't know why are you doing this, but i seriously not recommend 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 recommend you search another way to do it.

Upvotes: 3

Related Questions