Content last modified Monday 6 March 2017
hop to #bottom
About It:
Rate it:
  • Helpful?
  • 1 Yes
  • 0 No
Flag it:

If you'd like to provide updated information and do not have access to directly edit, please contact the site admin; thanks!

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.

  1. 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.
  2. 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.

Article Request Count:
Posted here:
07 Apr 2005
Article modified:
07 Apr 2005

Comments/questions? Leave a message in the form.

Commenting is closed for this article.

Commented (8)

awesome tip! thanks.
Just so you’re aware: Textpattern sends the content from the txp:css tag with a text/css content type header. So, using this method in the name of “good practice” doesn’t really apply.

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.
Yeah I just checked the css.php file and lo and behold there is the good old header blurp contradicting the script directive for text/javascript.

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” ;-)).
could it be plugined? i personally find it really convenient to have script files neatly placed where the rest of the textpattern files are..

would an admin extension be able to add a new section for scripts, based on the css file system?

‘just some thoughts…
Why not just store it as a form? You could call it the same way using < output_form >. It’s not separated from the other forms but then again your JS isn’t separated from your CSS in the style tab either.
Well, an output form is another way to spit out javascript. It will just have to differ in the method by which it’s retrieved. An output form would be a way to included embedded javascript. The whole form would need the script wrapper, and it would show up in the HTML of the sheet.

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.
The txp:output_form is better suited for this.

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.

Would you care to write a comment?

You know you want to visit the Archives.




There are also tag clouds, 'cause those are fun.
Published with Textpattern