6

Is there any jquery pluginto use to keep common header and footer in a HTML page?

Like if i can add header.html and footer.html into index.html.

I know I can with php but if possible I want to do without installing any server on my local PC. later after all work done i will use php includes

header.html

<title>Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/modernizr-2.0.6.min.js"></script>

index.html

{include header.html}

<body class="home">

{include footer.html}

Footer.html

<footer class="f1">
    <p>copyright &copy; year</p>
</footer><!-- .f1 -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/general.js"></script>
</body>
</html>
Jitendra Vyas
  • 134,556
  • 218
  • 544
  • 822

2 Answers2

14

jQuery itself has some features that allow you to do that. If you can select header's/footer's container on each page, you can insert any common content you want, even replace the existing one.

jQuery replacing common parts of site

You can do something like this:

jQuery(function(){
    jQuery('.header').html('SOME COMMON HEADER');
    jQuery('.footer').html('SOME COMMON FOOTER');
});

See it in action here: http://jsfiddle.net/6sCfm/

jQuery loading external files into containers

Or, if you insist on loading external files, you can do this (using .load()):

jQuery(function(){
    jQuery('.header').load('header.html');
    jQuery('.footer').load('footer.html');
});

but pay attention to correct paths you are giving as parameters and make sure, that files should have only the HTML you need (no <head>, <body> tags, etc. - it will make HTML incorrect).

Loading parts of pages into containers

If you have whole pages (with <head>, <header> etc.), you can load only parts of them. Preferably give meaningful IDs to the parts you want to load (eg. header and footer) and supply them in the path, after space, as selector:

jQuery(function(){
    jQuery('.header').load('header.html #header');
    jQuery('.footer').load('footer.html #footer');
});

This should be flexible enough :)

Tadeck
  • 117,059
  • 25
  • 140
  • 191
  • I want to do similar to this http://php.about.com/od/tutorials/ht/template_site.htm – Jitendra Vyas Dec 21 '11 at 15:49
  • I have added more info in my question how i want to do – Jitendra Vyas Dec 21 '11 at 15:56
  • @JitendraVyas: You are doing it wrong. I mean you are trying to add scripts that would be loaded even before your own script is executed. This can not be done without gimmicks, I suggest changing your design and using server-side code. But if you insist, do not load `` as HTML, just modify some things from JS (such as title of the window), and within `` use my suggestion. As far as script are concerned, you can load them using `jQuery.getScript()`, but **they will not load before your code loading them is executed**. Good luck! – Tadeck Dec 21 '11 at 16:00
  • SO the thins I'm asking is only possible server-side. – Jitendra Vyas Dec 21 '11 at 16:03
  • 1
    @JitendraVyas Yes, like I said the page has to load before your client-side script will execute. If you have no `

    ` or `

    ` on your page before these scripts run then your page is invalid. Also if you are including jQuery in your header page, then jQuery is loaded after you are trying to use it; which makes no sense.

     – Chad Dec 21 '11 at 16:15
  • @Chad: You are generally right, except this part: "_the page has to load before your client-side script will execute_". In fact you can execute scripts **before** the page is fully loaded, but "it depends" and is not worth further investigation in this case. I totally agree the best solution is using server-side code. – Tadeck Dec 22 '11 at 14:01
  • @Tadeck "loaded" is the wrong word to use. I was trying to drive home a point. – Chad Dec 22 '11 at 15:27
  • @Chad: If that is the case, I agree. – Tadeck Dec 22 '11 at 22:59
  • Thanks for the above code.. Will this work if we are using bootstrap on both HTML pages? The one in which we are including and the one that is included both have bootstrap running.I am trying to do it but it's causing problems :( – sm.ali Apr 28 '20 at 17:36
2

jQuery UI is working on templating and also has a list of existing template engines (on that page).

If you want something super simple, just write something small to ajax in the content you want. Then include that script on all pages that need it.

$.get('/header.html', function(data) { $('#headerPlaceholder').html(data); });
$.get('/footer.html', function(data) { $('#footerPlaceholder').html(data); });
Chad
  • 17,852
  • 4
  • 44
  • 70
  • I only want to keep common header and footer for multiple pages so if i change in header or footer it should be apply to all pages. I know how to do it in php but I want to do same client side – Jitendra Vyas Dec 21 '11 at 15:40
  • header will also have `html` and `head` and css, javascript links – Jitendra Vyas Dec 21 '11 at 15:41
  • Well this will do what you want, but if you do it client-side the page has to load first. A page without ``, `

    `, etc would be invalid. maybe someone else has a way to see this that I don't. The same answer I gave was given [here](http://stackoverflow.com/questions/418503/common-header-footer-with-static-html) as well by the way.

     – Chad Dec 21 '11 at 15:43