PDA

View Full Version : Template toolkit question..



gharris999
2009-04-30, 07:44
If, in my html page, I include something like:



[% PROCESS pageheader.html %]

..what is the correct way to add meta tags to the <head> section of the html? E.G., if I want to have...


<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store" />
<meta http-equiv="Refresh" content="[% refreshtime %]; url=[% nexturl %]?action=[% action | uri %]" />
</head>

..included in the processed html, what's the correct TT syntax?

Right now, I'm prefacing the [% PROCESS pageheader.html %] with a separate <html><head> section in my html file. This results in two <head>s in the processed html. Most browsers seem to be able to cope, but this seems like a kludge.

mherger
2009-04-30, 09:18
> <meta http-equiv="Cache-Control" content="no-cache, no-store" />

This shouldn't be needed, as the standard headers already try to prevent
caching issues. I said "try", because every browser has a different
strategy, thus we fail sometimes...

> <meta http-equiv="Refresh" content="[% refreshtime %]; url=[% nexturl

There's no way to do this. You might want to add some simple JS
"location.url='/your/page.html'"

--

Michael

gharris999
2009-04-30, 12:09
I tried to adapt the default skin's pageheader.html to my own uses by adding the meta refresh tag to it...but I was unable to reference the file. An entry of:


[% PROCESS /Default/plugins/SrvrPowerCtrl/pageheader.html %]

..results in:


[09-04-30 12:51:56.7654] Slim::Web::HTTP::_generateContentFromFile (2539) Error: file error - /Default/plugins/SrvrPowerCtrl/pageheader.html: not found


Anyway, the three browsers that I've tried so far (IE8, Firefox 3.0.10, Chrome 1.0.154.59) don't seem to have a problem with an extra <head> section with the meta refresh tag preceding the <html> section. A lot of bad html gets written, so I guess browsers have to be forgiving.

Coding my html page like this:


<head>
<meta http-equiv="Refresh" content="[% refreshtime %]; url=[% nexturl %]?action=[% action | uri %]" />
</head>
[%- pagetitle = 'PLUGIN_SRVRPOWERCTRL_MODULE_NAME' | string -%]
[%- extJsScripts = BLOCK -%]
<script type="text/javascript" src="[% webroot %]html/Browse.js?r=[% revision %]"></script>
[%- END -%]
[%- PROCESS pageheader.html %]

<div style="background-color:#404040; height:117px; margin-top:-2px; margin-right:-5px; margin-left:-5px;">
<img src="/Default/plugins/SrvrPowerCtrl/html/images/icon.png" alt="SrvrPowerCtrl" width="96" height="96" hspace="12" vspace="12" align="left" />
</div>

<br><h1>[% actionmessage %]</h1><br><br>

<a href="[% webroot %]plugins/SrvrPowerCtrl/actioncanceled.html?action=[% action | uri %]"><h3>[% "PLUGIN_SRVRPOWERCTRL_SERVER_CANCEL" | string %]</h3></a>

[% PROCESS pagefooter.html %]

..yields processed html like:


<head>
<meta http-equiv="Refresh" content="15; url=/Default/plugins/SrvrPowerCtrl/actiondone.html?action=suspend" />
</head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" type="text/css" href="/html/ext/resources/css/ext-all.css?r=TRUNK" />

<title>Server Power Control</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="/Default/slimserver.css"/>
<link rel="stylesheet" type="text/css" href="/Default/skin.css"/>
...
etc.

..which all of the browsers seem fine with. The refresh to the new url happens right on schedule.

So, rather than tax my feeble mind trying to come up with a javascript solution, I think I'll stick with this primitive-pete method.

Other than all-around kludgyness, Michael, do you see anything to object to here?

mherger
2009-04-30, 13:34
> Other than all-around kludgyness, Michael, do you see anything to
> object to here?

Why all that hassle which will break for sure in some other browser? The
JS version is very basic, should work in anything since Netscape 2.0 or
MSIE 3.0, and might even be less code.

Michael

gharris999
2009-04-30, 14:18
Why all that hassle which will break for sure in some other browser?

I'm not sure I know what you mean by "all that hassle". Aren't you yourself using a meta refresh tag in the handheld skin, albeit in pageheader.html?


The JS version is very basic, should work in anything since Netscape 2.0 or MSIE 3.0, and might even be less code.
Easy for you to say. ;)

I've managed to turn myself into a barely passable procedural perl coder who, as soon as the going gets object orientated, becomes a danger to himself and to any others in the vicinity. But my javascript ignorance really knows no bounds. I wouldn't have the first clue as how to code this.

mherger
2009-04-30, 14:33
> I'm not sure I know what you mean by "all that hassle". Aren't you
> yourself using a meta refresh tag in the handheld skin, albeit in
> pageheader.html?

I meant the double html header section.

> ignorance _really_ knows no bounds. I wouldn't have the first clue as
> how to code this.

grep (or some other full text search tool) is your friend:
EN/switchserver.html uses the following script

<script language="JavaScript">
setTimeout( "loadWebsite()", 2000 );

function loadWebsite() {
parent.location = '[% switchto %]?player=[% player | uri %]';
}
</script>

Just put your url where the "switchto" et al are. This will forward your
page after 2 seconds (setTimeout()).

Michael

gharris999
2009-05-01, 13:23
Thanks, Michael. So...


<script language="JavaScript">
setTimeout( "update_leftcontent()", [% refreshtime %] );

function update_leftcontent() {
parent.browser.location = '[% nexturl %]?action=[% action %]';
}
</script>

..seems to do the trick, reloading the leftcontent iframe with the new page. But this is dependent on the page's leftcontent iframe name always being "browser". You're not likely to change that anytime soon, are you?

Also, I still don't understand how to get the javascript inside the <head> block using TT commands.

mherger
2009-05-01, 13:34
> ..seems to do the trick, reloading the leftcontent iframe with the new
> page. But this is dependent on the page's leftcontent iframe name
> always being "browser". You're not likely to change that anytime soon,
> are you?

No. A whole lot of our scripting depends on it.

> Also, I still don't understand how to get the javascript inside the
> <head> block using TT commands.

No need to get it in there. It can be anywhere in your code.

Michael

gharris999
2009-05-01, 14:00
Ok, thanks.

pippin
2009-05-02, 03:54
I tried to adapt the default skin's pageheader.html to my own uses by adding the meta refresh tag to it...but I was unable to reference the file. An entry of:


[% PROCESS /Default/plugins/SrvrPowerCtrl/pageheader.html %]

..results in:


[09-04-30 12:51:56.7654] Slim::Web::HTTP::_generateContentFromFile (2539) Error: file error - /Default/plugins/SrvrPowerCtrl/pageheader.html: not found



Just in case you want to try this again:
Just copy the default pageheader.html to you plugin's main html directory and modify it.
The reference


[% PROCESS pageheader.html %]


Will be resolved to your plugin directory first I believe (when called from within your plugin's code) and only if it doesn't find one there will use the one in "EN" (or whatever the parent skin is).

But there's an even simpler way (Michael, you could have told him):
The default "pageheader.html" will process the content of "pageHeaderScripts" within the header section, so all you need to do is, add some code like


[%- pageHeaderScripts = PROCESS someHeader -%]
[%- BLOCK someHeader %]
...
[% END -%]


The one thing you have to be careful about is that some browsers don't like whitespace before the header, so make use of "[%- -%]" in your code OR (that's what I do) do away with all the [%%]'s altogether and wrap long passages of TT code into a single
[%-
...
...

-%]

For performance reasons I would say: don't do anything with JS that you can do without...

gharris999
2009-05-02, 09:41
Thanks, Pippin. "pageHeaderScripts" is now working for me. Only caveat you didn't mention: you can't have both "pageHeaderScripts" and "extJsScripts" in the same page. I was including extJsScripts simply because the examples I was cribbing from included it.

Re javascript performance hit: adding a little javascript at Michael's suggestion ended up improving the UI, I think. Here's the page as it stands now:


[%- pagetitle = 'PLUGIN_SRVRPOWERCTRL_MODULE_NAME' | string -%]
[%- pageHeaderScripts = PROCESS JsSrvrPowerCtrl -%]
[%- BLOCK JsSrvrPowerCtrl %]
<script type="text/javascript">

var nSeconds = [% refreshtime %];

setTimeout( "update_countdown()", 1 );

function update_countdown() {

var szMessage = "[% actionmessage %]";

if (nSeconds > 0) {
document.getElementById('countdownmsg').innerHTML = szMessage.replace(/%d/, nSeconds);
setTimeout( "update_countdown()", 1000 );
} else {
parent.browser.location = '[% webroot %][% nexturl %]?action=[% action %]';
}

nSeconds--;
}
</script>
[% END -%]
[%- PROCESS pageheader.html -%]
[% IF webroot == '/' %]
<div style="background-color:#404040; height:117px; margin-top:-2px; margin-right:-5px; margin-left:-5px;">
<img src="/Default/plugins/SrvrPowerCtrl/html/images/icon.png" alt="SrvrPowerCtrl" width="96" height="96" hspace="12" vspace="12" align="left" />
</div>
[% END %]

<br><h3><div id="countdownmsg">&nbsp;</div></h3><br><br>

<a class="browseItemLink" href="[% webroot %]plugins/SrvrPowerCtrl/canceled.html?action=[% action | uri %]">[% "PLUGIN_SRVRPOWERCTRL_SERVER_CANCEL" | string %]</a>

[% PROCESS pagefooter.html %]

The javascript shows the user a countdown timer on the page before refreshing to the next url. I'll try to test this page using the Handheld skin on a suitably underpowered device/browser and see if it presents problems.

pippin
2009-05-02, 13:30
Thanks, Pippin. "pageHeaderScripts" is now working for me. Only caveat you didn't mention: you can't have both "pageHeaderScripts" and "extJsScripts" in the same page. I was including extJsScripts simply because the examples I was cribbing from included it.

Ah. I didn't know that because I never used extJs since the Ext library takes up gazillions of bytes to load upfront and renders anything that uses it completely dysfunctional on iPhone.


The javascript shows the user a countdown timer on the page before refreshing to the next url. I'll try to test this page using the Handheld skin on a suitably underpowered device/browser and see if it presents problems.

Err... the Handheld skin doesn't use Ext, doesn't it? But OK, the header thing will probably work whether you use Ext or not and your JS code there doesn't require any libraries either.