.load() está me dando problemas. Eu estou trabalhando em um projeto de carregador de seção e eu simplesmente não consigo buscar o arquivo que eu preciso.

O que estou tentando alcançar: #sectionContainer está vazia na carga do documento, mas no documento pronto está "cheio" comPages1.html. Isso é feito por um arquivo JavaScriptsections.js. O arquivo JS e o index.html NÃO estão na mesma pasta. Aqui está a estrutura do site (estou executando muitos projetos no meu site)

pasta principalProjeto 1Projeto 2 (sectionLoaderTest /)index.htmlPages1.htmlPages2.htmlcss /js /sections.jsProjeto 3...

E o código que eu uso para carregar o Pages1.html no 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);
        }
    });
});

Eu tentei todos os métodos possíveis (/, ./,., ../, ..) que eu conheço e nada parece funcionar. Aqui está ocaso de teste.

Alguém sabe o que estou fazendo errado?