Load html content in div

Question

I am trying to load the content from another html file into my existing html file using jquery .load

But unfortunately it is not loading the content.

Please suggest me with the proper solution.

Here is my existing html and jquery to load content from external HTML file

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Review</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
            <ul class="reviews" id="revw">

            </ul>
    </div>
    <script>
    function check(){
$( "#revw" ).load( "review_list.html #test" );
}
    </script>
    </body>
    </html>

Page from which we need to load the content

<html>
<head></head>
<body>
<div id='test'>
 Load this content to the id="revw" div.
</div>
</body>
</html>

You are not calling the function `check()` anywhere.. – techfoobar Sep 20 '13 at 05:41 — techfoobar, Sep 20 '13 at 05:41

score 3 · Answer 1 · answered Sep 20 '13 at 05:41

3

You are not calling the function check() anywhere.

Try this:

...
<script>
function check() {
    $( "#revw" ).load('review_list.html #target');
}
$(document).ready(function() {
    check(); // call the function
});
</script>
...

answered Sep 20 '13 at 05:41

techfoobar

65,616
14
114
135

I tried this but not working.. `$(document).ready(function() { check(); $( "#revw" ).load( "review_list.html #test" ); });` – Sowmya Sep 20 '13 at 05:52
I am doing this in local and plain html files – Sowmya Sep 20 '13 at 05:53
1

I believe this will help: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing – techfoobar Sep 20 '13 at 06:07
@techfoobar And is it possible to path to the html file like this: foldername/review_list.html ? – Dr.jacky Jun 30 '15 at 03:47

score 1 · Answer 2 · answered Sep 20 '13 at 05:57

1

Try this using $.get.

 $(document).ready(function() {
    $.get('review_list.html')
             .success(function(data) {
                 $('#revw').html(data);
             });
    });

Your HTML page

<div id='test'>
 Load this content to the id="revw" div.
</div>

answered Sep 20 '13 at 05:57

raduns

765
7
18

`XMLHttpRequest cannot load file:///D:/V_2/review_list.html. Origin null is not allowed by Access-Control-Allow-Origin. ` I am getting this error when i see in the inspect element cosole (chrome). Content is not loading – Sowmya Sep 20 '13 at 06:00
You cannot load or post or get without a web server. Only plain html files works for you (i.e) No xmlHttpRequest will work without a web server. – raduns Sep 20 '13 at 06:05
I am using plain html file only. I have only these 2files in my folder but y it is not loading the content? Do I need to upload files to server to get the result? – Sowmya Sep 20 '13 at 06:07
Yes, you need to upload it to the server to get the result. – raduns Sep 20 '13 at 06:08

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

Please Refer this link :

Load one page in to another using Jquery

It has a detailed explaination of your problem

Delayed loading of a html page using jquery

Both these will solve the probelm.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 20 '13 at 05:46

seshan

99
2
11

Load html content in div

3 Answers3