javascript - jQuery's include method doesn't work -

javascript - jQuery's include method doesn't work -

as website has 1 page, , index.html getting long , impossible read. decided set each section in different html file , utilize jquery included it.

i used jquery's include in way has been mentioned here include external html file apparently doesn't work website. don't know problem.

here link of workspace.

here doing in index.html file 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 used this method create sure file accessible , fine. problem not accessibility of files

you overwriting contents of #includedcontent 7 times (see documentation of jquery.load). ajax, there no guarantee request finish first end random page content within container.

the solution create containers each page , load each page within dedicated container, this:

class="lang-html prettyprint-override"><div id="includedcontent"> <div class="page1"></div> <div class="page2"></div> <div class="page3"></div> </div> class="lang-javascript prettyprint-override">$(document).ready(function() { $("#includedcontent .page1").load("page1.html"); $("#includedcontent .page2").load("page2.html"); $("#includedcontent .page3").load("page3.html"); });

nb: having said that, not understand how ajax solves problem of page beingness long/impossible read.

javascript jquery html