Reuse elements of HTML

Question

I'm writing a static web site that uses JQuery to make some AJAX calls to a RESTful API and populate the page with data.

The site functions correctly (and quickly), everything is good.

As I extend the site and add additional pages, I'm noticing that I'm duplicating certain regions on every page.

For instance, each page shares a common header element.

<header>...Some non-trivial content...</header>

Rather than repeat this definition on each page is there some mechanism, by which, I can define this section once and include it in each document.

Remember that the pages must be served statically but any standard complaint browser functionality can be utilised.

Is there a good way to do this, and what is it or, will I have to abandon DRY principles for this aspect of my client side code?

Any restrictions on putting the header in php and including it in the pages ? — Patsy Issa, Aug 30 '13 at 13:40
Take a look at this: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — Alvaro, Aug 30 '13 at 13:41
Any objection to using Jade/Stylus for development (or something of that ilk) to dynamically generate your files? — kunalbhat, Aug 30 '13 at 13:41
`$('#content').load('reusablefile.htm');` ? That's how I do it. — Johan, Aug 30 '13 at 13:41
@PatsyIssa The server side must be completely static, no view engine, nothing dynamic. — Jodrell, Aug 30 '13 at 13:47
what about a nice client side cookie or moreover since you need that data client side only so to not waste the traffic put everything in localStorage — , Aug 30 '13 at 14:05

score 7 · Accepted Answer · answered Aug 30 '13 at 14:05

There's definitely some ways to achieve this. You could either do it using some features of your server-side language that allows to include the content of a page in another page, or if you do not have any server-side technology, you could simply put that code in it's own html document and load it's content using AJAX.

In jQuery it could look like:

$('#header').load('header.html');

However, if the content isin't static for all pages, you could always define a JS module that would be responsible to render this header. You module could make use of a client-side templating engine, like Mustache, Handlebars, etc. However you do not have to use any of these.

Here's a simple example:

DEMO

//in somefile.js, please note that you should namespace your modules
var Header = {
    //default config
    config: {
        el: '#header',
        title: 'Some title'
    },

    init: function (config) {
        var cfg = this.config = $.extend({}, this.config, config);

        $(cfg.el).html('<h1>' + cfg.title + '</h1>');
    }
};

$(function () {
    Object.create(Header).init({
        title: 'Some other title'
    });

    Object.create(Header).init({
        el: '#header1',
        title: 'Yeah'
    });
});

score 5 · Answer 2 · answered Aug 30 '13 at 13:56

As I mentioned in the comment, this is how I do it:

main.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
        <sript src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
             $(function(){
                  $('#commonsection').load('reusablefile.htm');

                  // which is eqvivalent to:
                  //
                  // $.ajax({
                  //     url: 'reusablefile.htm',
                  //     dataType: 'html',
                  //     success: function(data){
                  //         $('#commonsection').html(data);
                  //     }
                  // });
             });
        </script>
     </head>
     <body>
         <div id="commonsection"></div>
     </body>
</html>

reusablefile.html:

<script>
    (function($){ //separate scope to keep everything "private" for each module
        //do additional javascript if required
    })(jQuery);
</script>
<p>...Some non-trivial content...</p>

score 3 · Answer 3 · answered Aug 30 '13 at 13:47

3

You could use jQuery's ajax as to load the header file. In each file you could load the html like so:


$('#header').load('header.html');

answered Aug 30 '13 at 13:47

Vincent Cohen

871
7
27

score 2 · Answer 4 · answered Aug 30 '13 at 13:42

Since you're already using AJAX calls to populate your site with data, you could do the same for the common regions.

Just store the HTML for those regions in a separate file and load it in the page with AJAX. Also, you can work with caching using the Cache-Control headers on that file so you don't reload the entire content from the server with each page load.

score 0 · Answer 5 · edited May 23 '17 at 11:45

0

If you're using straight HTML, you could do it with a SSI include command or by creating a template page and including it in jQuery. Both of these links might help you

Include another HTML file in a HTML file and http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

edited May 23 '17 at 11:45

Community

1
1

answered Aug 30 '13 at 13:42

imbask

155
6

An SSI include would require dynamic handling on the server. – Jodrell Aug 30 '13 at 14:22

score 0 · Answer 6 · answered Sep 06 '13 at 02:49

It looks like this in modest:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>reusablePiece</include>
  </head>
  <body>
    <reusablePiece/>
  </body>
</html>

reusablePiece.xml

<header>...Some non-trivial content...</header>

score -2 · Answer 7 · answered Aug 30 '13 at 13:42

-2

Very simple would be the jQuery .clone() function.

If you have more complex content I recommend looking at Handlebars.js which is a full fledged JS templating engine.

answered Aug 30 '13 at 13:42

ced-b

3,779
1
24
35

1

How are you supposed to `clone()` elements between pages? – Johan Aug 30 '13 at 13:46
I don't see how this should work when a new page is reqeusted. – Vincent Cohen Aug 30 '13 at 13:50

Reuse elements of HTML

7 Answers7