Attack Of Design(back to home)

One common problem when developing html templates, is that you have to duplicate the same code a lot: every page needs the same header and footer, and this goes against the DRY principle. In a WordPress theme, you would simply use a PHP include, but what if you can’t use PHP? Some buyers use ASP, Rails, or other server-side languages, and will not be able to parse PHP on their server.

An alternative is to use client-side Javascript to include your content. This way, your template will work no matter which server-side language is being used, and thanks to the magic of jQuery it only takes a few lines of code.First, let’s decide how we’ll specify which file to include and where to include it. You could use any element for this, but let’s keep it simple and use a DIV:

<div class="js-include" title="nav.html"></div>

“js-include” is simply a class name that we’ll assign to every element that should trigger the include. And “nav.html” is the relative URL of the file that we’re including.

Now, let’s take a look at the jQuery code:

$(".js-include").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

1. The first line just tells the script to execute the function once of each element that has the class “js-include”.
2. We then store the current element inside a variable
3. We use jQuery’s get function with the following arguments: the div’s title as the URL of the file to load, and a callback function
4. The callback function replaces the current DIV with the content that we just loaded.

And there you go, jQuery includes in 6 lines.

Disclaimer: of course, this technique should not be used on a live site, because if you load your content with javascript Google will not be able to index it. But it’s a nice alternative to PHP when you’re developing your template, or if you know that your buyers will replace the javascript includes with their own server-side includes. For example, it would be a good technique to use for an admin interface template.

Tweet