CODEWITHSUNDEEP
javascriptjqueryhtml
Regina Kreimer
Regina Kreimer

Reputation: 126

Navigation between pages - html

I trying to navigate between 3 pages which contain the same header and footer but each page has different content. I want to load different contents html on hash change. The problem is that when I click on the same page again, the content.html loaded again.

How can I use the content without loading the html again and again, using java script/html/jquery?

Code example:

Navigationbar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Bar</title>
    <link rel="stylesheet" type="text/css" href="css/navigationbar.css">

</head>
<body>
<nav>
    <img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'>
    <ul class="navigation-bar-ul">
        <li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li>
        <li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li>
        <li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li>
    </ul>
</nav>
</body>
</html>

initial.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>One Page Test</title>
    <link rel="stylesheet" type="text/css" href="css/homepage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main-container" class="main-container">
    <div id="header" class="header">
    </div>
    <div id="content" class="content"></div>
    <div id="footer" class="bot"></div>
</div>

<script>
    document.onreadystatechange = function(){
        if (document.readyState == 'complete') {
            window.onhashchange=hash_change;
            window.onload=hash_change;
            if(window.location.hash==''){
                //default hash
                window.location.replace('#home.html');
            }

            //load the header
            $("#header").load("fragments/navigationbar.html");
            //load the footer
            $("#footer").load("fragments/footer.html");
        }
    }

    function hash_change()
    {
        //get the new hash
       var newHashCode =  window.location.hash.substring(1);

        if (newHashCode === "home.html"){
            $("#content").load("home.html");

        } else if (newHashCode === "aboutus.html") {
            $("#content").load("aboutus.html");

        } else if (newHashCode === "contact.html"){
            $("#content").load("contact.html");

        }

    }
</script>
</body>
</html>

Upvotes: 0

Views: 3086

Answers (2)

jorgonor
jorgonor

Reputation: 1719

A longer but suitable solution would be to build a content cache on your own.

For example asking to the server just once the html and then setting it to the $('#content') element. You can use this helper function.

var contentsCache = {};
var getAndCache = function(url, callback) {
    var cachedContents = contentsCache[url];

    if (!cachedContents) {
        $.get(url, function(serverContents) {
            cachedContents = serverContents;
            contentsCache[url] = cachedContents;
            callback(cachedContents);
        });
    } else {
        callback(cachedContents);
    }
};

And then replace the $('#content').load calls by calls to this new asynchronous way.

function hash_change()
{
   var fillContentCb = function(s) { 
       $('#content').html(s);
   };
    //get the new hash
   var newHashCode =  window.location.hash.substring(1);

   if (newHashCode === "home.html"){
        getAndCache("home.html", fillContentCb);

   } else if (newHashCode === "aboutus.html") {
        getAndCache("aboutus.html", fillContentCb);
   } else if (newHashCode === "contact.html"){
        getAndCache("content.html", fillContentCb);
   }
}

As suggested in some comments, consider using native HTML navigation instead. Another suggestion is to use a client-side JS framework which supports routing if this application is likely to grow.

Upvotes: 1

user5940189
user5940189

Reputation:

Add an if condition that checks whether the current hash location matches with the one that's been clicked on, and if it does just return. You'd have to store it in a global JS variable, and set it every time you navigate.

Upvotes: 0

Related Questions