Web Page Templates Using jQuery

The Problem

Recently I've found myself working on a redesign project for a large organization website for which some sort of template engine is a necessity. Repeated design and content elements like headers, navigation, and footers, must be maintained in one place, not hundreds or thousands of places on each page of the website. So I should use a CMS like Drupal or Joomla, right? Unfortunately this website resides on a web server that cannot use PHP, JSP, ASP.NET, or any other modern platform that would accommodate a modern CMS application. The website must be built using only static content and client-side technologies like JavaScript. (No, you're not reading a 10-year-old article. Believe it or not, the year is 2009 as I write these words.) But we could use Dreamweaver templates, right! Well, for this project, there is a reluctance to rely on a desktop software to build and maintain the website. A free text editor should suffice for maintaining all the content. Also, there are concerns that Dreamweaver templates might introduce some performance issues when updating a template that impacts hundreds or maybe even thousands of pages, as each page would need to be edited and re-saved whenever a change is made to a dreamweaver template.

The Solution

The jQuery JavaScript library can be used in a creative way to build a template engine that behaves much like the ASP.NET "Master Page" feature, for example. Using jQuery, we only need to add a small block of code to the top of each page to call an external CSS file and two external JavaScript files, and by doing so, a simple page can be dynamically transformed into a rich layout with complicated header, footer, and navigation elements. When the template files are updated, the rendered displays of all pages that use the template are automatically updated.

An Example

View the source code of this example page that uses such a jQuery template engine. You'll find the following block of code near the top of the page's source code:

<link rel="stylesheet" type="text/css" href="template.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/template.js"></script>

This code transforms the basic page with no navigation to a more complex page with header, footer, and navigation. (Notice I'm using a query string name-value pair in the link to the basic page so you can see what the page would look like without a template.) Sure, the transformed result is not a very attractive page, as it's only a demonstration, but those garish colored panels could be replaced with anything you desire and of unlimited complexity.

How It Works

In this specific example, I only needed to do the following:

Download the latest jQuery library. I used the "minified" version and renamed the file jquery.js so I can swap in different versions in the future without changing my code. The jquery.js file is placed inside a subdirectory named "js."
Create a simple web page that will use the template. Name the page "templateuser.html." The templateuser.html file will include the following elements:
- The content must be wrapped in a div element with class of "content." That div is followed by a footer div with class "footer." Those divs are wrapped inside an outer div with class "pagewrapper."
- The small block of code listed above must be included in the head section of the templateuser.html page.
Create a template page that will be called by the templateuser.html page. The template page should be named template.html. The template.html page should be designed exactly how you want the page to appear, complete with header, footer, and navigation elements. Except the contents of the div with class "templatecontent" are not used, as those contents will be provided by the template user page.
Create an external JavaScript file named template.js in the "js" subdirectory that includes the code necessary to transform the templateuser.html page into a page with a richer layout and navigation using the template.html file. This external JavaScript code does the following:
- Appends a copy of the header from the template.html file into the templateuser.html file.
- Adds a copy of a div from the template.html file into the templateuser.html file for the left navigation.
- Adds the "templatecontent" CSS class to the div with the "content" CSS class.
- Adds the "templatepagewrapper" CSS class to the div with the "pagewrapper" CSS class.
- Adds a copy of a div from the template.html file into the templateuser.html file for the footer.
- Removes the original footer from the templateuser.html file.
When the templateuser.html file is loaded in a web browser, the jQuery JavaScript library is run, and then the template.js JavaScript file is run, which transforms the simple page into a richer page with navigation.

For more details, view the source code of the template.html file, the templateuser.html file, the template.js file, and the template.css file.

Benefits

Exceptional compatibility with all popular web browsers.
Allows 100% valid XHTML and CSS code in compliance with W3C standards.
If JavaScript is disabled in a visitor's web browser, pages that use the template are still rendered with an acceptable layout and good usability.
The template.html file is easy to design and maintain. It can be designed and edited like any static web page.
Editing the template is fast. Editing one template file can potentially update the rendered display of thousands of files, without having to update the code in those individual files like a Dreamweaver template does.
Once the template.html file is loaded by the JavaScript, it will be cached and reused, so subsequent pages load very fast.
No desktop software or server-side applications are required—just a text editor and the free, open source jQuery library.
The JavaScript required for this solution should not interfere with additional JavaScript needed for specific pages.
Search engine indexing should not be affected adversely, as the pages that use the template can include a link to a site map in their footer that gets replaced by the template footer, thereby linking search engine indexing bots to all the other files on the website.
Performance should not be affected adversely, as the overhead of the additional template files is only about 55KB.
Screen readers used by people with disabilities should not have any problems reading pages that use this template engine. I'm going to do more research to confirm this.