Sprinkle Javascript library by Jon Davis

]> Sprinkle Javascript library by Jon Davis

<script src="sprinkle.js"></script>

<div src="info.html"></div>

This is basically CSI (Client-Side Includes), when SSI (Server-Side Includes) is not available. You can also call it "sprinkle", as that's the name I gave the Javascript library.

Why "sprinkle"? Well, why clutter a web page with IFRAMEs or a zillion AJAX calls when you should simply be able to "sprinkle" your empty DIVs with src=".." ?

Call me a wuss, but I'm a pantsy for messy markup. I'm also on a diet. I've found that sprinkling spices on my microwaved frozen veggies goes a long way to turning a boring side dish into a delicious meal compliment.

I've also found that being an ASP.NET developer for Windows but integrating with a Linux / Perl shop can be very interesting, but when dealing with content integration it can be a genuine pain in the hind parts since server-side execution behaviors are vastly different. Hence, my approach to CSIs (Client-Side Includes).

Download version 1.3d here: sprinkle.js (last modified: 11/4/2007)
(Download compressed (4kb): sprinkle_compressed.js by Javascript Compressor

Tested on: Internet Explorer 7.0, Internet Explorer 6.0, Firefox 1.5 & 2.0
Partially supported: Safari 3.0 for Windows, Safari 1.3.2 for Mac (limited support on Safari as it doesn't seem to support reads/writes on the value property of dynamic <input ..> tags)
Not supported yet at all: Opera 9.23 or lower
Not even tested yet: Safari for Mac, and everything else

Other notes:

v1.3.4: Added a compressed version (4kb), and also moved dtdExtensionsCleanup() to the top of the script without waiting for the document to load.
v1.3.3: Beautified at http://elfz.laacz.lv/beautify/
v1.3.2: Defaulting the attribute apply="value" on input elements turned out to be a bad idea. I've disabled that.
Safari 3.0 beta for Windows doesn't seem to handle reading or writing the value property on a dynamically generated <input type="text"> tag at all (just reads and writes blank), so the src=".." functionality there is completely broken on Safari at nested levels. For example, the apply="value" test below is blank.
Opera (latest version) simply balks at the script. I'm still trying to figure out why.
XHTML compliance without a custom DTD. Cool. Looks easy enough to declare DTD extensions inline, making it easier to make the page XHTML compliant without rendering glitches, namely the ugly "]>" that shows up at the top of the page. Look at dtdExtensionsCleanup() in the script which removes that ugly "]>" from the top of the body. Worked on MSIE 6, MSIE 7, Firefox 1.5, Firefox 2, and Safari 3 for Windows. (Opera didn't have the problem.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
	<!ATTLIST div src CDATA #IMPLIED >
	<!ATTLIST div anticache CDATA #IMPLIED >
	<!ATTLIST div wraptag CDATA #IMPLIED >
	<!ATTLIST div apply CDATA #IMPLIED >
	<!ATTLIST input anticache CDATA #IMPLIED >
	<!ATTLIST input apply CDATA #IMPLIED >
]>

Sprinkle was featured on Ajaxian.com. Got lots of good feedback (as in, "how useless!" and "it's broken!" whee!!). I definitely need to put refactoring into my task queue. But first I'm trying to get Safari and Opera working.
A lightweight version of Sprinkle for Prototype was done up by Mislav Marohnić "just for fun" and posted here: http://pastie.caboo.se/pastes/97980. I haven't tested it. Judging by a quick glance of the code, it doesn't have quite as many features but it's close and is much less code. (I opted to avoid Prototype because Prototype itself is about five times bigger than my lib. On the other hand, I could definitely do some clean-up of my lib to make it a lot smaller.)
v1.2: You can use apply="replace" to replace the tag that contains the src=".." attribute. It will be replaced with a tag of the same name unless you use wraptag="..", so for example if you don't want div behavior (parent's width and line break, for example) you might use a junk word like "htm", like
```
<div src="mysrc.txt" apply="replace" wraptag="htm" />
```
which will result in <htm>{content of mysrc.txt}</htm>
v1.2: You can also set apply="value" if you want to set a src=".." on an <input> tag, e.g.
```
<input type="text" src="defaultText.txt" apply="value" />
```
This is the default method for input tags. v1.3b: This must be explicitly declared. A browser test follows:
v1.1: Full-blown HTML documents (<html><head>..</head><body>{desired content here}</body></html>) will be cleaned up. If the <body> tag is detected, its contents will be cropped. The web browser will typically do this anyway, but it shouldn't have to, so it is done in script. You can turn this off by setting cropBody="off".
v1.1: By default, if you make a change to external content and the content is a static resource file, it doesn't reload when you hit F5. To get the cache to reset on the included content, you'd have to navigate to the included content and then hit F5.

This can be fixed by using antiCache="querystring", which will append the src with a unique querystring. (If a querystring exists, it is appended.)
```
<div src="info.html" anticache="querystring"></div>
```
If the referenced file is an .aspx (ASP.NET) file and response headers are set up for cache control then you don't need this.
v1.0: Currently, referenced content only works within the site / domain due to security constraints on the web browser. You cannot, for example, use src="http://www.ajaxian.com/", unless of course the containing web page is hosted there.

Anything else worth noting? E-mail me .. jon @t jondavis dot-net

Who on earth is Jon Davis?: I'm not the lead singer of Korn, nor have I been host or engineer on any TV shows (although I nearly went down that career path). I am, however, a senior developer at a very prominent Internet services company that you yourself have probably done business with at some point in your life.