Javascript

If you've been doing a lot of Javascript work in an XT template, you've probably run into one of these.

The first is related to the comment tag. Insert the following into your template and view it both directly (preview) and rendered in Sitellite:

<script language="javascript" type="text/javascript">
	alert ("Hello World!");
</script>

Works fine. Now add comments like they suggest you should for complex Javascript:

<script language="javascript" type="text/javascript">
<!--
	alert ("Hello World!");
// -->
</script>

Works fine in the preview, but it does nothing in Sitellite. View the source in Sitellite and you'll see an empty set of <script> tags. That's because the comment tags are stripped out.

The solution, however, is not to simply omit the comment wrapper. The following example illustrates why:

<script language="javascript" type="text/javascript">
<!--
	msg = "";
	for (i = 0; i < 10; i++) {
		msg += i;
	}
	alert (msg);
// -->
</script>

Again, works fine in the preview. Now take out the comments, which should fix it in Sitellite as well, right?

<script language="javascript" type="text/javascript">
	msg = "";
	for (i = 0; i < 10; i++) {
		msg += i;
	}
	alert (msg);
</script>

Here it comes: Wrong. For me, the result of this becomes a nice "Template Error: not well-formed (invalid token) (Template: html.default.tpl, Line 46, Column 16)" error message. If we trace this to the exact line and column numbers (which will be different for you), we'll it's telling us it doesn't like the < in our Javascript code. That's because those aren't valid in XHTML (or HTML for that matter), and need to be turned into character entities in the contents of a web page. But while you'll see that changing the < to < in the example solves the problem (for some browsers at least), changing all our code is no fun and not an ideal solution.

Fortunately, there are several possible solutions to this problem. The first takes some getting used to, but works for all browsers, and doesn't require modifying all of your Javascript code. This is to use character data (or CDATA) tags, which allows < and & characters all you like. For example:

<script language="javascript" type="text/javascript">
//<![CDATA[
	msg = "";
	for (i = 0; i < 10; i++) {
		msg += i;
	}
	alert (msg);
//]]>
</script>

Notice that I've commented out the CDATA tags with Javascript comments (//), so that to the browser in preview mode, they're ordinary comments, and to the browser after the template is rendered, they're ordinary comments as well (but blank, since the CDATA tags are simply used to preserve their contents through the XT rendering process, and afterwards are removed). As always, to see the output for yourself, View > Source, my friend.

The second solution is the one I prefer (and actually, I'll be mentioning a third, but it only applies to app developers). That is to save your Javascript as an external .js file, either in the js/ folder, in your app's folder, or in your template set itself (under a js/ subfolder), depending on how far-reaching it is (ie. a rendering trick for your template would go in inc/html/yourtemplates/yourscript.js). This makes your Javascript cacheable by the browser, which will increase the loading speed of your web site (bonus!), and will also encourage you to make your Javascript more reusable as well.

However, this brings up another quirk folks run into on occasion in XT, which is described in the 3rd point under "The Basics: HTML Versus XML" above: References to external scripts usually appear like this:

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

XT turns this into:

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

in the final output, which most browsers don't like. There is a simple solution to this (described earlier): Add a space. For example:

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

XT will now include your external Javascript file no problem.

For more info:

http://devedge.netscape.com/viewsource/2003/xhtml-style-script/

Page 1: The Basics: HTML Versus XML
Page 2: Comments
Page 3: Javascript
Page 4: Doctype
Page 5: Outputting PHP

All Tutorials