Failed in Appending HTML file through jquery

Question

I know this question has been asked several times but I am experiencing problem with this. I want to append my index.html file with contents of otherpage.html

My code for index.html is

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.get("otherpage.html", function (data) {
                $("#appendToThis").append(data);
            });
        });
    </script>
</head>
<body>
    <div id="appendToThis"></div>
</body>

And my code for otherpage.html is

<p>This is second page.</p>

When I open Index.html I see a blank white page. Can anyone please point out where the mistake is..Thanks in Advance

Code is working fine for me. Most likely you are getting a CORS error. Try loading it in a web server. — APAD1, Feb 28 '17 at 18:50

score 1 · Answer 1 · edited May 23 '17 at 12:00

This is another answered question that I believe is what you are looking for:

How to load another html file using JS

This example uses some of the points others were making in this thread. It will require an AJAX request for the JS to read the file, parse it, and then replace that info. The example uses an onClick method, but you should be able to use any method that you like (including on load) to execute your defined AJAX call function.

score 0 · Answer 2 · answered Feb 28 '17 at 18:50

0

Run your file on a website or localhost. Ajax requests are disabled in chrome browser over file protocol.

You can try the following flag if you really want to run it: chrome --allow-file-access-from-files

answered Feb 28 '17 at 18:50

mehulmpt

15,861
12
48
88

score 0 · Answer 3 · answered Feb 28 '17 at 19:09

Your code no problem,and the problem could be:

by default browser can't load files from system via ajax,so you must run the pages in a web server.you can use a http-server,this server is simple to use and install,but first you must install nodejs.
if you have run the pages on the server,and still can't load the partial page,your partial page url maybe wrong.

score -1 · Answer 4 · answered Feb 28 '17 at 18:53

-1

try it hope it will work

<script type="text/javascript">
    $(function () {
       $("#appendToThis").load("otherpage.html");
    });
 </script>

answered Feb 28 '17 at 18:53

Sudhanshu Jain

494
3
11

Failed in Appending HTML file through jquery

4 Answers4