.load() and relative paths

`.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. Does anyone know what I am doing wrong?