• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

re-use the same html code in every page

 
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!
 
author & internet detective
Posts: 41073
848
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
author & internet detective
Posts: 41073
848
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67637
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
author & internet detective
Posts: 41073
848
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Bear: Good point. That's much better advice than what I thought of - the literal answer to the question.
 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:



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



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



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

 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67637
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
author & internet detective
Posts: 41073
848
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67637
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
author
Posts: 42
5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67637
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:


Loaded in every html page (i want the navbar in every page):


And then right after the <body> tag of my pages i have this simple 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
author & internet detective
Posts: 41073
848
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for sharing. Glad to see you got something working and "in production".
 
Filipe Madureira
Ranch Hand
Posts: 44
1
Chrome Java Windows
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:



When i load the page i see only the footer.

What's happening?
 
Bear Bibeault
Sheriff
Posts: 67637
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
You're not going crazy. You're going sane in a crazy word. Find comfort in this tiny ad:
Free, earth friendly heat - from the CodeRanch trailboss
https://www.kickstarter.com/projects/paulwheaton/free-heat
reply
    Bookmark Topic Watch Topic
  • New Topic