JQuery Function Call to Load an HTML file Does Not Work

Question

I am trying to load an html file using the jQuery .load function (https://api.jquery.com/load/).

I have created this function in script.js:

function loadPost(file) {
    console.log(file);
    $("#content").load(file);
};

This is what index.html looks like:

<html>

    <head>
        <script src="js/jquery.js"> </script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>

    <body>

        <script>
            loadPost("post1.html"); // does not work
        </script>

        <header>

           // function call works
           <a id="go_home_link" onclick="loadPost('post1.html')" href="#">
               Go home
           </a>
        </header>
    </body>
</html>

I have also tried using loadPost("'post1.html'"), but that doesn't work either. Any ideas why using the javascript block would not work, but call the function inline in another element does work?

Thanks

You're using `$("#content")`, but I don't see any HTML element whose `id` is `content` in your code - is this a mistake? If not, then that's probably the reason why. — GoBusto, Jan 01 '20 at 00:21
id="content" on which the load function is called but where that id is in HTML. Have a look at it. — krishna_tandon, Jan 01 '20 at 00:32
Since the call from the link works, you probably do have the ID in your real HTML. You probably have it *after* the script that calls `loadPost()`, so it's not loaded into the DOM when you call the function. See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Barmar, Jan 01 '20 at 00:56

Williaan Lopes · Accepted Answer · 2020-01-01T01:17:49.793

1

You call #content but, does not exist.

I think you could use an <iframe>, something like that:

index.html

<html>

    <body>

        <header></head>

           // function call works
           <a id="go_home_link" onclick="loadPost('post1.html')" href="#">
               Go home
           </a>
        </header>
        **<iframe id="content"></iframe>** <!-- load page here -->

        <script src="js/jquery.js"> </script>
        <script type="text/javascript" src="js/script.js"></script>
        <script>
            loadPost("post1.html"); // does not work
        </script>
    </body>
</html>

script.js

function loadPost(file) {
    console.log(file);
    $("#content").attr("src", file);
};

edited Jan 01 '20 at 01:17

answered Jan 01 '20 at 00:55

Williaan Lopes

536
7
8

This doesn't explain why it works from `onclick="loadPost('post1.html')"`. – Barmar Jan 01 '20 at 00:56
This won't work unless you put the script after the iframe in the HTML. – Barmar Jan 01 '20 at 00:57
not work, because `#content` not exist in your code and, if you put a div, will produce an error **blocked by CORS policy...** – Williaan Lopes Jan 01 '20 at 01:02
You'll only get that error if the URL is in a different domain. – Barmar Jan 01 '20 at 01:15
It's not my code, I didn't write the question. Anyway, you have to put the call to `loadPost()` after the iframe, otherwise `$("#content")` won't find it. – Barmar Jan 01 '20 at 01:16
**"not my code"** rsrs, sorry... About the code, I tested here and working fine... – Williaan Lopes Jan 01 '20 at 01:22
You changed the order, now it's correct. – Barmar Jan 01 '20 at 01:39
Thank you for your responses. I just discovered my error. First thing, in my question I accidentally removed my the #content div. So there was a div. The mistake I was making was calling the function before the creation of the #content div. So looks like the problem was that I was calling the function on an element that doesn't exist yet – echao Jan 01 '20 at 03:26

JQuery Function Call to Load an HTML file Does Not Work

1 Answers1