include .html files from different folders using jQuery

Question

I got a jQuery script that includes .html files from an includes folder into my index.html, and it works just fine.

var includes = $('[data-include]');
jQuery.each(includes, function(){
  var file = 'includes/' + $(this).data('include') + '.html';
  $(this).load(file);
});

I've encountered a problem when I try to include the same .html files but this time I am in a subpages folder trying to achieve the same result, but nothing gets included.

Folder structure:

index.html
assets
includes
   -login.html
   -header.html
subpages
   -contact.html

index.html

        <!-- Include search-bar.html -->
        <section class="login" data-include="login"></section>

        <!-- Include header.html -->
        <header class="logo" data-include="header"></header>

        <script type="text/javascript" src="assets/lib/js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="assets/js/script.js"></script>

contact.html

        <!-- Include search-bar.html -->
        <section class="login" data-include="login"></section>

        <!-- Include header.html -->
        <header class="logo" data-include="header"></header>

        <script type="text/javascript" src="../assets/lib/js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="../assets/js/script.js"></script>

sixerss · Accepted Answer · 2017-04-06 08:25:11Z

1

To be relative to the root directory, start the URI with a /

var file = '/includes/' + $(this).data('include') + '.html';

try it.

edited Apr 6, 2017 at 8:25

answered Apr 6, 2017 at 8:18

sixerss

15010 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dennis Lundberg Over a year ago

Yeah that was my thought on the matter too, but I've tried it and it does not work. That even messes up things with index.html, so the includes does not work there aswell.

sixerss Over a year ago

document.location.hostname + '/includes/' + $(this).data('include') + '.html'; might works

sixerss Over a year ago

make a console.info() of the string it generate and check if the route displaying is the correct ones

Dennis Lundberg Over a year ago

Thanks a lot for that one. Didn't knew it existed. Well, this was highly disturbing... I tried, just for funzies, to switch to another editor and everything works when changing to '/includes/'. So, I guess the code works when I access the folder from root. Thanks for the help!

Collectives™ on Stack Overflow

include .html files from different folders using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related