jQuery's include method doesn't work

Question

As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.

I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.

Here is the link of my workspace.

Here is what I am doing in index.html file to include other sections

<script src="./js/jquery-1.11.1.min"></script>
<script>
    $(function() {
        $("#includedContent").load("./page1.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page2.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page3.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page4.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page5.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page6.html");
    });
</script>
<script>
    $(function() {
        $("#includedContent").load("./page7.html");
    });
</script>

I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files

Your jQuery file looks like it should have the extension .min.js, but you're only including the .min on the filename in the code — gabe3886, Nov 05 '14 at 08:24
Fixing that .min part didn't do anything and problem still exist. Also removing ./ didn't do anything neither. — Node.JS, Nov 05 '14 at 08:28
https://www.dropbox.com/s/8yyurj0tz800vnx/Screenshot%202014-11-05%2002.32.47.png?dl=0 — Node.JS, Nov 05 '14 at 08:33

Salman A · Accepted Answer · 2014-11-05T08:39:08.143

You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.

The solution is to create containers for each page and load each page inside its dedicated container, something like this:

<div id="includedContent">
    <div class="page1"></div>
    <div class="page2"></div>
    <div class="page3"></div>
</div>

$(document).ready(function() {
    $("#includedContent .page1").load("page1.html");
    $("#includedContent .page2").load("page2.html");
    $("#includedContent .page3").load("page3.html");
});

NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.

score 1 · Answer 2 · answered Nov 05 '14 at 08:24

There are several things that look odd to me:

all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion

jQuery's include method doesn't work

2 Answers2