inc: A super-tiny client-side include JavaScript jQuery plugin

Posted 2007-10-04 in JavaScript by Johann.

Is 2007 2015 going to be the year of the JavaScript client-side include? After Mark Nottingham’s HInclude and the equally cool purple-include, I thought it was time to do something new.

How about

• declarative inclusion of remote content
• pre- and post-inclusion callbacks to transform content
• all this in less than 250 B after GZIP?

inc does this.

Demo

• Replace this text with a mildly amusing text.
• Include another text snippet and uppercase it.
• This pseudo text will be replaced on load.
• Test callback method.

Usage

Add the inc JavaScript after a recent jQuery build.

<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">(function(a){a.fn.inc=function(b,c,d,e){return this.length&&b?this.each(function(){e=a(this);a.ajax({url:b,success:function(f,g,h){e.html(a.isFunction(c)?c(f,b):f);a.isFunction(d)&&d(b,g,h)}})}):this};a(function(){a('[class*="inc:"]').each(function(){var b=/inc:(\S+)/.exec(this.className||"");b&&a(this).inc(unescape(b[1]))})})})(jQuery);</script>

I recommend inlining the script since it’s so small. If you have your own scripts to concatenate and minify JavaScript files, you can download jQuery inc in its uncompressed form.

Automatic inclusion

If you would like to have some content automatically included once the page is loaded, use the inc CSS class and add the resource to load. The URI must be URL-encoded.

<p class="inc:footer.html">This text will be replaced
    with footer.html</p>

<p class="small inc:footer.html inactive">This text will
    be replaced with footer.html as well</p>

<p class="inc:la%20la%20la.html">This text will be replaced
    with “la la la.html”</p>

Programatic includes

You can use the jQuery.inc function to include resources. It takes three arguments, the URL to load, an optional function that is called with the content of the URL and an optional function that is called once the content is included.

<p onclick="$(this).inc('something.html');">Include something.</p>

$('#bla').inc('bla.html', function(a) { return a.toLowerCase() });

$('#bla').inc('bla.html', null, function() {
    alert('content is now live') });

License

MIT license.

History

I have been doing client-side includes for a while on my home page and later on the “page not found” page.

Changelog

• 2015-02-13: Updated and checked with various jQuery versions between 1.2.6 and 2.1.3. Removed alternative code for IE because jQuery can use the native XMLHttpRequest object instead of ActiveX controls.
• 2011-09-11: Update for newer jQuery versions plus various optimizations. Saving almost 100 B.
• 2008-01-22: Pages would even be included if no elements were matching. Added post-inclusion callback.
• 2007-12-19: Fixed two bugs in Internet Explorer.
• 2007-12-11: jQuery 1.2 broke inc.
• 2007-10-09: Made even smaller and used more jQuery functionality.
• 2007-10-04: Initial release.

8 comments