re-use the same html code in every page

[Filipe Madureira]

Hello,

i just finished the toolbar for my website and i was wondering if there is a way to have a different HTML file in which my navbar code will be stored.

I'd love to call this code in every page of my website where the navbar is at the moment, so that when i'll edit one file i'll edit the navbar in every page.

Thank you!

[Jeanne Boyarsky]

Are yo using Java? JSP (and JSF and Struts tiles and most other frameworks) allow you to "include" separate files in your page. If you are using just HTML and no other technology, the only thing I can think of is to use frames.

[Filipe Madureira]

Jeanne Boyarsky wrote:Are yo using Java? JSP (and JSF and Struts tiles and most other frameworks) allow you to "include" separate files in your page. If you are using just HTML and no other technology, the only thing I can think of is to use frames.

This is my homepage, i'm using html/css with bootstrap and nothing more at the moment, i'm following some tutorials using Javascript and jQuery so if you have something to suggest with jQuery it's perfect!

[Jeanne Boyarsky]

Hmm. JavaScript/jQuery can output text or HTML to a page. This means you could have a separate jQuery file that writes out the menu and you call that from each page.

[Bear Bibeault]

If you are not using server-side assist (e.g. JSP, PHP, and so on), then the modern approach is is exactly the opposite of what you are doing. You don't have multiple pages where you inject the same repeating HTML element; you have a single page that contains the markup that is common to all views, and replace the differing content. This is known as a single-page application or SPA.

Modern frameworks like Backbone, Angular, and so on support this approach. You can, of course, do it with just jQuery if you'd rather not adopt a framework at this point.

[Jeanne Boyarsky]

Bear: Good point. That's much better advice than what I thought of - the literal answer to the question.

[Filipe Madureira]

Okay, i found some interesting stuff with the .load() method.

Please guys, correct me if i'm wrong (probably i am, given the fact that the script isn't working on my editor) but i tried the following:

added the <script> tag in my index.html element like this:

<script style="text/javascript" res="script.js"></script>

Deleted all the navbar code from index.html and replaced it with:

<div class="navbar-frame"></div>

Created a navbar.html file with all the navbar code:

<!--Header bar!--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/index.html">Fieel's Stuff</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="background-header"><a href="#">Games</a></li> <li class="background-header"><a href="#">Videos</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle background-header" data-toggle="dropdown" role="button" aria-expanded="false">Projects <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header dropdown-divisor">Java</li> <li class="background-header"><a href="/TEXTLAND/Textlandrpg.html">TEXTLAND textual RPG</a></li> <li class="divider"></li> <li class="dropdown-header dropdown-divisor">HTML5 & Javascript</li> <li class="background-header"><a href="#">Gaben Sales game</a></li> <li class="divider"></li> <li class="dropdown-header dropdown-divisor">HTML/CSS</li> <li class="background-header"><a href="/CSSolarSystem/SolarSystemHTMLCSS.html">CSSolar System</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="background-header"> <a href="#">Contact <span class="sr-only">(current)</span> </a> </li> <li class="background-header"><a href="#">Leave a comment</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>

and then created a script.js file with this .load method:

$(document).ready(function(){ $("#navbar-frame").load("navbar.html"); });

[Filipe Madureira]

Bear Bibeault wrote:If you are not using server-side assist (e.g. JSP, PHP, and so on), then the modern approach is is exactly the opposite of what you are doing. You don't have multiple pages where you inject the same repeating HTML element; you have a single page that contains the markup that is common to all views, and replace the differing content. This is known as a single-page application or SPA.

Modern frameworks like Backbone, Angular, and so on support this approach. You can, of course, do it with just jQuery if you'd rather not adopt a framework at this point.

Hey Bear, i had already replied before reading your answer!

I can use PHP, the web host supports it. I never tried though. I should have to learn (i'd like to), the best approach is to use server-side assist (in my case PHP)?

At the moment i'd really love to figure out what the best way to do this is, and learn it. So, for example, you guys told me that using PHP is way better i will do it that way, i'm really noob and this is my first website. I really need this kind of advises.

Your approach Bear is fascinating, i'd use a page with empty elements, the navbar and then add differences between all the pages, right? Seems efficient.

[Bear Bibeault]

I'm not going to say what is best or not, as that's just too subjective.

I will say the that the modern approach (and therefore the one that will look nest on your resume ) is the SPA. If you were to ask my advice, that's the way I'd recommend going.

Without a framework, it has its challenges: especially if your site needs to be book-markable with deep links. But its the approach much of modern web development is taking.

We recently had a book promotion in this forum for a book on SPAs... look in the history of this forum for discussion on this subject.

[Jeanne Boyarsky]

PHP has an include statement. I think that's better than the jQuery/load idea. I was suggesting that because I was trying to think of how it could possibly be done without a server side include.

[Bear Bibeault]

With regards to .load() not working: 99% of the time it's a problem with the URL. Check that the URL is correct. Be sure that you know how to use the browser tools to monitor network traffic and especially Ajax requests.

[Zak Ruvalcaba]

There are simpler frameworks than Angular, Backbone, Knockout, etc. for doing this sort of thing. Have you looked at Mustache or Handlebars? In fact some of these "frameworks" use Mustache and Handlebars....

Zak

[Bear Bibeault]

For the benefit of the OP, I'd say that Mustache and Handlebars are not frameworks per se; but rather are client-side markup generators. On their own they're not going to enable an SPA, but they could be useful for replacing the .load() approach with a more data-driven approach.

I like Handlebars a lot.

[Filipe Madureira]

Just for the sakè of having my solution on the thread i'll try to explain what i ended up doing. At the moment i'm using the Jquery .load() method because it's the only way i managed to make it work. I'll try your methods as soon as i have more time to learn/try new things.

But for the moment, this is it:

i have a script.js file which i'll load on every page:

$(document).ready(function () { $("#navbar-frame").load("/navbar.html"); });
Loaded in every html page (i want the navbar in every page):
<!--adding my own JS script file--> <script src="js/script.js"></script>

And then right after the <body> tag of my pages i have this simple div:

<!--navbar div with the id--> <div id="navbar-frame"></div>

And navbar.html contains all the code used by the navbar, there is a .css file too used by the navbar.html.

THIS is the result if you're interested!

[Jeanne Boyarsky]

Thanks for sharing. Glad to see you got something working and "in production".

[Filipe Madureira]

Thank you Jeanne!

I stumbled upon a new problem! I think it might be something obvious but i'm too noob to understand.

I wanted to load the same footer in every page exactly like i did with the navbar, using the same .load() method i used before.

I made a footer.html file, added all the html code which appears in the footer and added a <div id="footer-frame"></div> at the end of every page.

in the <head> i'm still loading just one file, script.js:

$(document).ready(function () { $("#navbar-frame").load("/navbar.html"); }); $(document).ready(function () { $("#footer-frame").load("/footer.html"); });

When i load the page i see only the footer.

What's happening?

[Bear Bibeault]

Firstly, there's no need to use two ready handlers -- put all your startup statements in one handler.

Secondly, use the browser tools to look at the requests? Are they both firing off? Are they both returning what is expected?