Smarty

[andrelle]

I'm trying to use Google charts. The code works in a static html page but fails when using it in a template. I catch the following error:

Syntax Error in template "lib/smarty/templates\nightowl.tpl" on line 15 "google.load("visualization", "1.1", {packages:["corechart"]});" - Unexpected ":", expected one of: "}" , " "


The javascript in my template looks like this:



<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<script type="text/javascript">
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);

var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
height: 300,
width: 400,
legend: {position: 'right'}
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>



Has anyone experienced this type of error using Google charts? I can't find anything online discussing this type of syntax error that happens in a smarty template but not in a static html. Is something being left out when the template is rendered?

Thanks for any help

[andrelle]

I just found the answer, with a little bit more reading of the smarty api

I found this:

literal} tags allow a block of data to be taken literally. This is typically used around Javascript or stylesheet blocks where {curly braces} would interfere with the template delimiter syntax. Anything within {literal}{/literal} tags is not interpreted, but displayed as-is.

Which was exactly my issues. A curly brace in the Google Charts javascript block was being interpreted, throwing the parser off. I surrounded the <script></script> tags with {literal}{/literal} and the chart generated.

What's curious about it is I have a function in the same template a bit farther down, a small bit of jQuery which had curly braces but never threw an error. However, once I surrounded the Google Charts javascript block with {literal}, the other function threw a syntax error. So I surrounded that one, and everything worked.

[U.Tews]

Smarty 3 has a new auto literal option which is enabled by default.
When the { is followed by a space it's not interpreted as smarty delimiter but literal.

That mught be the reason that it did work in your other case.

[andrelle]

I see. Thanks!