Javascript in templates

These documentation pages are no longer maintained. Please visit the new documentation site.

If you are using javascript functions or inline style-declarations in your page layout templates, you will have faced the problem of how to escape the character "{", so that the ezp template parser won't destroy e.g. the opening brackets of your javascript functions. The recommended way to accomplish this is to use the "{literal}" and "{/literal}" operators.

Another way that does the job without using "{literal}" is using "{ldelim}" and "{rdelim}" where you want to get "{" and "}" in your template output. "{ldelim}" and "{rdelim}" are internal functions of the ezp template parser. These functions let the parser print out just the parser-tags it uses.

There is one little caveat to keep in mind when you use the "{ldelim}" and "{rdelim}": If the ezp-devs should actually decide to use another standard tag instead of "{" and "}" for their template parser, you will have to change your own templates, too, since "{ldelim}" and "{rdelim}" will always print out the parser tag in use, and if this tag should be changed to say "{#", your javascript-functions will also get an "{#" as opening bracket.

However, this seems not to be a serious danger for template designers, since most of you are probably using an editor tool capable of replacing text chunks as needed. So if some day the "{ldelim}" and "{rdelim}" are no longer appropriate, we may easily change them to whatever may be appropriate then.

Note: Another way to use javascript functions without the Literal problems is to put all javascript functions into a separate file:

<script SRC={"javascripts/script.js"|ezdesign} type="text/javascript" language="JavaScript" charset="UTF-8"></script>

The file is then placed in design/mydesign/javascripts/.
This makes it easier to work with the javascript as well since the javascript is separate from the design. Web-browsers may also cache the javascript to speed up page loading.

This is the preferred method in xhtml anyway, to work around problems with the following items in the page itself.

'<!--', '-->', '<' and '&'

See Script and Style elements: w3.org and Doxdesk.com(info from Jeroen van Gorkum)

In a virtual host environment with rewrites on you will have to add .js to the allowed file extensions, i.e. change

RewriteRule !.(gif|css|jpg|png)$

RewriteRule !.(gif|css|jpg|png|js)$

Comments

script in template

André R.

Thursday 09 February 2006 8:35:55 pm

to set javascript variables in templates:




<script type="text/javascript" language="javascript">


<!--


var myNode = "{$node.node_id}";


function SetNode(thisdiv){ldelim}


  document.getElementById(thisdiv).innerHTML = myNode;


{rdelim}


-->


</script>

vil result in:




<script type="text/javascript" language="javascript">


<!--


var myNode = "2";


function SetNode(thisdiv){


  document.getElementById(thisdiv).innerHTML = myNode;


}


-->


</script>

you call the javascript with somethin like:




onclick="SetNode(this);"

how to print this var out in tempalte?

kevin wei

Sunday 09 January 2005 7:44:05 am

i write a file scripts.js like following:




var = {$node.name};


document.write(var);

and upload it under corresponding folder
in template file:
<script src={"scripts.js"|ezdesign} type="text/javascript" language="javascript">
</script>

this will print out nothing, if i change var="test", and it works fine.
how can i print $node.name out in jaascript ?

thanks!

thanks!

The script tags need to be lower case for xml 1.0 trasional validation.

Clay Pereira

Monday 19 July 2004 9:55:05 pm

In order to get this to validate you need make the tags lowercase

<script src={"javascripts/script.js"|ezdesign} type="text/javascript" language="javascript"></script>

<script></script>

Iris Hoekstra - Roscam Abbing

Wednesday 18 February 2004 4:08:59 pm

Please bear in mind that the example above, i.e.:

SCRIPT SRC={"javascripts/script.js"|ezdesign} TYPE="text/javascript" LANGUAGE="JavaScript"/>

only works in Mozilla but not MS Internet Explorer or Opera. The tag needs a matching closing tag:
SCRIPT SRC={"javascripts/script.js"|ezdesign} TYPE="text/javascript" LANGUAGE="JavaScript"></SCRIPT>

Regards, Iris

Exponential - The Content Management Ecosystem

User menu

Path

Javascript in templates

Comments

script in template

how to print this var out in tempalte?

The script tags need to be lower case for xml 1.0 trasional validation.

<script></script>

Contents

Customization

Created

Last updated

Authors