title: .load() and relative paths
body: <p><code>.load()</code> 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.</p>
  <p><strong>What I am trying to achieve</strong>:
  <code>#sectionContainer</code> is empty on document load, but on document ready it is 'filled' with <code>Pages1.html</code>. This is done by a JavaScript file <code>sections.js</code>. 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)</p>
  <ul>
  <li><strong>main folder</strong></li>
  <li><em>Project 1</em></li>
  <li><em>Project 2</em> (sectionLoaderTest/)
  <ul>
  <li>index.html</li>
  <li>Pages1.html</li>
  <li>Pages2.html</li>
  <li>css/</li>
  <li>js/
  <ul>
  <li>sections.js</li>
  </ul>
  </li>
  </ul>
  </li>
  <li><em>Project 3</em></li>
  <li>...</li>
  </ul>
  <p>And the code I use to load Pages1.html on ready:</p>
  <pre><code>$(document).ready(function () {
      $(&quot;#sectionContainer&quot;).load(&quot;../Pages1.html&quot;, function (response, status, xhr) {
          if (status == &quot;error&quot;) {
              var msg = &quot;An error occurred. Status code: &quot;;
              $(&quot;#error&quot;).html(msg + xhr.status + &quot;. Status text: &quot; + xhr.statusText);
          }
      });
  });
  </code></pre>
  <p>I have tried every possible method (/, ./, ., ../, ..) that I know of and nothing seems to work.</p>
  <p>Does anyone know what I am doing wrong?</p>