Geek Answers Handbook

.load () and relative paths

.load() gives me problems. I am working on a section loader project and I just cannot find the file that I need.

What I'm trying to achieve : #sectionContainer empty when loading a document, but when the document is ready it is populated with Pages1.html . This is done using the JavaScript sections.js file. JS file and index.html are NOT in the same folder. Here is the structure of the site (I run many 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 that I use to download Pages1.html in finished form:

 $(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 tried all possible methods (/,. /,., .. /, ..) that I know and nothing works. Here is an example.

Does anyone know what I'm doing wrong?

+8
jquery path jquery-load
source share
2 answers

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

+8
source share

Your AJAX URLs must refer to the page you're on, so you want "Pages1.html" . What you have in the test case (..Pages1.html) will never work, as this is not a valid link. (Did you want to do ../ Pages1.html?)

+1
source share

More articles:


All Articles