.load() and relative paths

2019-01-19 15:32发布

.load() is giving me trouble. I'm working on a section loader project and I just can't seem to fetch the file that I need.

What I am trying to achieve: #sectionContainer is empty on document load, but on document ready it is 'filled' with Pages1.html. This is done by a JavaScript file sections.js. The JS file and the index.html are NOT in the same folder. Here is the site structure (I am running a lot of projects on my site)

  • main folder
    • Project 1
    • Project 2 (sectionLoaderTest/)
      • index.html
      • Pages1.html
      • Pages2.html
      • css/
      • js/
        • sections.js
    • Project 3
    • ...

And the code I use to load Pages1.html on ready:

$(document).ready(function () {
    $("#sectionContainer").load("../Pages1.html", function (response, status, xhr) {
        if (status == "error") {
            var msg = "An error occurred. Status code: ";
            $("#error").html(msg + xhr.status + ". Status text: " + xhr.statusText);
        }
    });
});

I have tried every possible method (/, ./, ., ../, ..) that I know of and nothing seems to work. Here is the test case.

Does anyone know what I am doing wrong?

2条回答
一纸荒年 Trace。
2楼-- · 2019-01-19 15:36

./Pages1.html should work. Tested all accounts for them in the address bar.

查看更多
时光不老,我们不散
3楼-- · 2019-01-19 15:48

Your AJAX URLs should be relative to the page you're on, so you want "Pages1.html". What you have in the test case (..Pages1.html) will never work, as that's not a valid reference. (Did you mean to do ../Pages1.html?)

查看更多
登录 后发表回答