CODEWITHSUNDEEP
javascriptjqueryhtml
Jodrell
Jodrell

Reputation: 35706

Reuse elements of HTML

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?

Upvotes: 6

Views: 13864

Answers (7)

Vincent Cohen
Vincent Cohen

Reputation: 878

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');

Upvotes: 3

plalx
plalx

Reputation: 43718

There are definitely some ways to achieve this. You could either do it using some features of your server-side language that allow you 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 its own html document and load its content using AJAX.

In jQuery it could look like:

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

However, if the content isn't static for all pages, you could always define a JS module that would be responsible for rendering this header. Your 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'
    });
});

Upvotes: 7

AdamStallard
AdamStallard

Reputation: 1830

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>

Upvotes: 0

Johan
Johan

Reputation: 35194

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>

Upvotes: 5

ced-b
ced-b

Reputation: 4065

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.

Upvotes: -2

dcro
dcro

Reputation: 13649

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.

Upvotes: 2

imbask
imbask

Reputation: 165

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

Upvotes: 0

Related Questions