Saturday, December 15, 2012

ssiJS: Server Side Includes on the Client

I cut my teeth on classic ASP where you build applications by including various blocks using SSI (server-side include) syntax. If you wanted to include common content (e.g. branding or a copyright statement) inside your <body> you would include it like this:
<!-- #include file="copyright.asp" -->

Aside from <iframe> there is no way to include content from other sites using HTML. You need JavaScript so I wrote a 3-liner jQuery script which does just that. Consider this HTML:
<div class="ssi" data-url="copyright.html"></div>

Add the following JavaScript to your $(function(){}); and you'll have client side includes:

$.each($('div.ssi'), function(a,b) {

What does this do? It iterates through all divs with the class 'ssi' and loads their content asynchronously from the url specified in their 'data-url' attribute. I think this is neat.

Full source:

<!doctype html>
<script src=""></script>
$(function() {
$.each($('div.ssi'), function(a,b) {
<div class="ssi" data-url="a.html"></div>
<div class="ssi" data-url="b.html"></div>

No comments:

Post a Comment