JavaScript Include

A few months ago at Humaniz we were working on a user interface project for an existing ASP.NET application. As a short cut, some of our developers use PHP includes when building templates to cut down down on the amount of duplicated code during the early stages of development.

The client’s developers wanted to take a peek at what we were working on, so we sent them a zip file. Their developers were less than pleased when they saw the 5 or so lines of PHP code and didn’t want to download WAMP. So I whipped up a script to include the HTML snippets via JavaScript. I believe we were using JQuery for this project and the whole thing ended up being about five lines of code.

JQuery jsInclude

Here is my implementation of my ghetto JavaScript “templating engine.”

    1 // Call this after your page loads
    2 function jsinclude_init() {
    3     $('div.jsinclude').each(
    4         function () {
    5             $('#'+this.id).load(this.innerHTML);
    6         }
    7     );
    8 }

Then I run the jsinclude_init() command a the end of the HTML file. In the examples I’ve just pasted this into the bottom of the page:

    1 <script type="text/javascript">
    2
    3     jsinclude_init();
    4
    5 </script>

You can put the jsinclude_init command in your framework’s onload or document ready event if you are using a script library with an event handler. Now to make our include statements:

    1 <div class="jsinclude" id="header">inc/header.htm</div>
    2 <div class="jsinclude" id="navlist">inc/nav.htm</div>

Each div with the jsinclude class gets replaced by the file specified in the div tag’s inner html.

After I wrote the JQuery version I decided to implement jsInclude in other AJAX libraries. The cool thing is that neither the initialization code or the include statements need to be changed. If you check out the demo link below, which is also available as a zip file, you will see that you only need to change the include statement to include the correct dialect of the jsinclude script.

Prototype/Scriptaculous jsInclude

This also works with Rico which is based on Prototype.

    1 function jsinclude_init() {
    2     $$('div.jsinclude').each(function (element) {
    3         new Ajax.Updater(element.id, element.innerHTML, {method: "get"});
    4     });
    5 }
    6 

Dojo jsInclude

    1 function jsinclude_init() {
    2
    3     var includes = dojo.html.getElementsByClass("jsinclude");
    4
    5     for (var i=0;i<includes.length;i++ ) {
    6         dojo.io.updateNode(includes[i].id, {url: includes[i].innerHTML });
    7     }
    8
    9 }

mootools jsInclude

    1 function jsinclude_init() {
    2
    3     $ES('div.jsinclude').each(function(element){
    4
    5         new Ajax(element.innerHTML, {
    6             method: 'get',
    7             update: $(element.id)
    8         }).request();
    9
   10     });
   11
   12 }

Resources

Check out the demo here.
You can download the source here.