Loading navbar into html page from different folders using javascript

Question

The following is my html source code structure.

Products

software.html

hardware.html

index.html

main-navbar.html

scripts

load-main-nav.js

I have moved my main navigation bar to a seperate file because it repeats in every page and am using javascript to load it into the respective pages. I have an empty div in the pages where I want to load the navbar.

<div id="main-nav"></div>

I have managed to load the navbar using jscript into the index.html page. But when I click the Software link it goes to the respective page but does not show the navigation bar. When I changed the javascript to $("#main-nav").load("../main-nav.html"); it displays the navbar for the Software page but not the index.html. Is there a way I could change the location part so that I can use the same script for files in any folders in my project?

main-navbar.html

<nav class="navbar navbar-default mc-header navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="../index.html"><img id="logo" src="images/logo.svg" alt="Company Logo"></a>
    </div>
    <div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
        <ul class="nav navbar-nav navbar-right" >
            <li><a href="Products/software.html">Software</a></li>
            <li><a href="Products/hardware.html">Hardware</a></li>
        </ul>
    </div>
</nav>

load-main-nav.js

$(function(){
    $("#main-nav").load("main-nav.html");
});

there is a difference between main-nav.html and ../main-nav.html as path. the second one is a relative path. When you give just main-nav.html it means that the nav bar is in the same folder as the page you are accessing right now. So when you navigate to Softwares.htm the folder/directory is Softwares so just speciofying main-nav.html will search for the file in Softwares folder which it not there so not loading. But ../main-nav.html will tell it that file is present in the folder one level above the current folder as in your case ../ shows the root of the application so it will load properly. — Manish, May 25 '16 at 03:29
When i use ../main-nav.html, the main-nav does not load in the index.html page. These both files are in the root — Michelle Ashwini, May 25 '16 at 03:32
yes because ../ shows one folder level above the current folder.. so instead use ./main-nav.html or simply use /main-nav.html for better understanding have a look at this post http://stackoverflow.com/questions/296873/basic-html-how-to-set-relative-path-to-current-folder — Manish, May 25 '16 at 03:34
When I tried ./main-nav.html it still does the same as previously. Whereas if I use /main-nav.html, the navbar isnt displayed on both pages — Michelle Ashwini, May 25 '16 at 03:40
there can be some other issue then because "./" always points to the root directory. and ./main-nav.html should server the purpose. — Manish, May 25 '16 at 03:47
Unfortunately no (at least from what I've found). I spent a while with this same problem on my websites trying to figure this one out. If you find an answer then kudos, but I finally just left it as leaving the home page with `./` and all of the other pages using `../` — amallard, May 25 '16 at 04:14
I've finally got this to work but using php not javascript. With php, I just used `/` and it worked. — Michelle Ashwini, Sep 21 '16 at 07:39

score 2 · Answer 1 · answered Apr 29 '19 at 20:16

I was able to accomplish this (without having to use php) by placing

<base href="../">

in the software.html & hardware.html header. Once you do this, you will have to make sure you update all the links in software.html & hardware.html as if they are being accessed from your top folder. I would also just put the js in each of those files so that it looks like the following.

<!--Navigation bar-->
<div id="main-nav"></div>

<script>
    $(function () {
        $("#main-nav").load("main-navbar.html");
    });
</script>
<!--end of Navigation bar-->

There has been some good discussion on the uses of the base tag in this thread:

What are the recommendations for html <base> tag?

Every site is different and while I was able to use this method on one of my sites, I was not able to use it effectively in another website (I couldn't use it on a site that required smooth transitions between local hash URLS).

Loading navbar into html page from different folders using javascript

1 Answers1