.load() и относительные пути

.load()вызывает у меня проблемы. Я работаю над проектом загрузчика разделов, и я просто не могу получить файл, который мне нужен.

Чего я пытаюсь добиться: #sectionContainerпуст при загрузке документа, но при готовности документа он «заполняется» Pages1.html. Это делается с помощью файла JavaScript section.js. Файл JS и index.html НЕ находятся в одной папке. Вот структура сайта (у меня много проектов на сайте)

• основная папка
  • Проект 1
  • Проект 2 (разделLoaderTest/)
    • index.html
    • Pages1.html
    • Pages2.html
    • css/
    • js/
      • section.js
  • Проект 3
  • ...

И код, который я использую для загрузки Pages1.html при готовности:

$(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);
        }
    });
});

Я перепробовал все возможные методы (/, ./, ., ../, ..), о которых я знаю, и ничего не работает. Вот тестовый пример .

Кто-нибудь знает, что я делаю неправильно?