Load div from external file using JQuery

Question

I'm running into a problem with JQuery, I've read multiple threads about this but I cannot for the life of me figure out what is wrong with my code. I've gotten it down to a pretty simplistic version of what I was trying to do, but it still will not work. Here is the code that I'm trying:

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.6.0.min.js"></script>
        <script>
            $(function() {
                $('#content').load("import.html");
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
    </body>
</html>

and here is the page that I'm trying to import:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="test-div">
            <p>This is some text.</p>
        </div>
    </body>
</html>

can somebody please point out what I might be doing wrong here?

The `load()` method only works on the server. - https://stackoverflow.com/questions/25210686/jquery-ajax-load-method-isnt-working — s.kuznetsov, Jun 05 '21 at 09:15

score 0 · Accepted Answer · answered Jun 05 '21 at 09:17

0

The DOM is likely not fully loaded when the .load function is being run. Change to this.

<script>
$(document).ready(function() {
  $('#content').load("import.html");
});
</script>

Note - as in the comment, this only works on a server.

answered Jun 05 '21 at 09:17

Will Walsh

1,799
1
6
15

This didn't work, it's still not loading. – BonelessCurv Jun 05 '21 at 09:20
Are you hosting the files on a webserver or locally on your PC? – Will Walsh Jun 05 '21 at 09:21
The files are hosted locally, and I would like to keep it as offline as possible because I plan to use and edit the site offline. – BonelessCurv Jun 05 '21 at 09:24
As a commenter said and I updated in my answer, this only works on a server. – Will Walsh Jun 05 '21 at 09:25
@BonelessCurv, For example, you can download and use `OpenServer`. This is local web server. – s.kuznetsov Jun 05 '21 at 09:32

score 0 · Answer 2 · answered Jun 05 '21 at 09:21

0

It should ideally work. There must be some other issue

Check if jquery library file is loading correctly
HTML page name is import.html or not.
At last, Are you getting any error on console?

answered Jun 05 '21 at 09:21

Amit Gupta

252
3
8

Yes, that's what I thought too. The page name is correct, and I'm pretty sure the library is loading correctly. I've downloaded it straight off the website. I am getting a strange error in the console though, apparently it has been blocked from loading by the CORS policy. I don't really know what that means though, unfortunately. Any idea on how to fix it? – BonelessCurv Jun 05 '21 at 09:27
CORS is cross origin recourse sharing, you might be trying to connect two different hosted application. I copy your code in my local system and it is running perfectly – Amit Gupta Jun 05 '21 at 09:35

Load div from external file using JQuery

2 Answers2