External Javascript In TXP
Okay, per recommendation, I’m writing this up as an official tip. I don’t know that I’m the first one to do this, but we can argue the etymology later. It’s possible to use the CSS database in Textpattern to store external javascript so that it doesn’t have to be embedded in the page template.
Anyhow, good practice suggests that javascript not be embedded into the HTML file. However with Textpattern, everything is in the database. It seems a shame to have to put extra files on the server. There is a way however.
As it turns out, the <txp:css /> tag has an attribute that lets you specify the name of the sheet you want to pull out. According to the Unofficial Textpattern Tag Manual this is useful for pulling out additional stylesheets, or switching styles on the fly. However we can also use it to pull ANY text source out of the database.
Okay, on to the good stuff. Here’s how to do it.
- Copy the javascript source into a TXP CSS stylesheet. Don’t worry that it’s not CSS. TXP doesn’t care. Remember the name of what you called it.
- In the page HTML template where you would like to call your Javascript source put the following:
<script type="text/javascript" src="<txp:css n="script-name" />" ></script>
And that’s all there is to it. The reason why it works is that TXP doesn’t really care if the text stored in the database is CSS or anything else. The <txp:css /> tag simply creates a URL to the css.php file and appends a ?n= tag to it. The css.php will use this to retrieve the page and serve it up. The script type text/javascript is what gives context for what the browser is retrieving.
Comments/questions? Leave a message in the form.
Commented (7)
You could still manage this via a plugin/addon though. Which would allow you to still use the Style tab, but also send the JavaScript with a correct mime-type.
I’m not certain if a plugin alone would help though. What would the URL call? Seems to me another hard file like css.php would have to be uploaded to be a target for the plugin call. So once we’re uploading files, we might as well upload the original JS file.
So I suppose until there’s a better way, this may simply be a hacked workaround that has the noted problem of the incorrect header information. (As opposed to a “good practice tip” ;-)).
would an admin extension be able to add a new section for scripts, based on the css file system?
‘just some thoughts…
The point with this tip is that it would be considered external to the HTML file. However Mary’s comment is well received. The css.php starts off with the PHP header() function and specifies text/css. Adding another file (say js.php) wouldn’t really help because then there’d have to be a tag to call that file (txp:css creates a URL that calls the css.php file explicitly.)
And because of this external file (css.php) there’s not really a way to include this as a plugin. This is just a quick and dirty twist of the way TXP works to get something that resembles external javascript.
example:
These txp tags…
<txp:output_form form=”meta” />
<txp:output_form form=”css” />
<txp:output_form form=”js” />
are all placed in the documents head.
Each form is saved as a file with the appropiate information contained therein.
The css form has all the “CSS”.
The meta from has all the documents “META” information.
The js form contains the required “JavaScript”
Subscribe to this article's comments RSS feed. [ ? ] View Recent Comments across the site. Get a Gravatar.
Would you care to write a comment?