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
– APAD1, Commented Feb 28, 2017 at 18:50

Community · Accepted Answer · 2017-05-23 12:00:14Z

1

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.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 28, 2017 at 19:00

malodie

465 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mehulmpt · Accepted Answer · 2017-02-28 18:50:11Z

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, 2017 at 18:50

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Comments

holi-java · Accepted Answer · 2017-02-28 19:09:13Z

0

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.

answered Feb 28, 2017 at 19:09

holi-java

30.9k7 gold badges76 silver badges87 bronze badges

Comments

Sudhanshu Jain · Accepted Answer · 2017-02-28 18:53:08Z

-1

try it hope it will work

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

answered Feb 28, 2017 at 18:53

Sudhanshu Jain

5343 silver badges11 bronze badges

Collectives™ on Stack Overflow

Failed in Appending HTML file through jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related