Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.

Smarty interfering with JavaScript
Goto page 1, 2  Next
 
Post new topic   Reply to topic    Smarty Forum Index -> Smarty 3
View previous topic :: View next topic  
Author Message
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Fri Mar 02, 2012 6:18 pm    Post subject: Smarty interfering with JavaScript Reply with quote

I'm using Smarty v. 3.1.8 for a new website.

My development process always starts by designing the graphical layout and visual presentation with HTML, CSS and jQuery/JavaScript. I do all this design first, before templating the site or adding PHP/MySQL code. You can see the wireframed site at: http://nacits.com/initialBuildTest/

The next thing I do is template the site. If you "View Source" for the link above, you can clearly see comment tags for where the header.tpl, index.tpl and footer.tpl files will be sectioned from. I simply copy and paste the code, from the URL I provided above, into each corresponding .TPL file.

However, my footer.tpl file contains most of the pages JavaScript, and it is interfering with something built in to Smarty.

I have confirmed Smarty is running (See: http://nacits.com/OLD_index.php)

I have tried setting debug and cache to false. This doesn't resolve it.

When I clear the JavaScript from the footer.tpl file, the page will display... to the point where the JavaScript is needed for display elements.

Question: What is built into Smarty v. 3.1.8 that can be causing such a problem with my page's footer.tpl file and how can this issue be fixed?

Moving the JavaScript into the HTML, HEADER tag is not an option.
Back to top
View user's profile Send private message
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Fri Mar 02, 2012 6:27 pm    Post subject: Reply with quote

Oh, and before someone asks, I use the original header.tpl, index.tpl and footer.tpl files, and paste in my HTML in place of the HTML in those files. everything else remains the same.
Back to top
View user's profile Send private message
douglassdavis
Smarty Junkie


Joined: 21 Jan 2008
Posts: 541

PostPosted: Fri Mar 02, 2012 7:10 pm    Post subject: Reply with quote

maybe http://www.smarty.net/docsv2/en/language.function.literal ?

Can't help you anymore without actual template code.
Back to top
View user's profile Send private message
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Wed Mar 07, 2012 9:26 pm    Post subject: Reply with quote

douglassdavis wrote:
maybe http://www.smarty.net/docsv2/en/language.function.literal ?

Can't help you anymore without actual template code.


If this is the case, its the dumbest thing ever to be allowed in Smarty. JavaScript and CSS, didn't used to matter, why would someone built in problems?

I'll Check it out though, to confirm.
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7366
Location: Lincoln Nebraska, USA

PostPosted: Wed Mar 07, 2012 9:49 pm    Post subject: Reply with quote

bamajr wrote:
douglassdavis wrote:
maybe http://www.smarty.net/docsv2/en/language.function.literal ?

Can't help you anymore without actual template code.


If this is the case, its the dumbest thing ever to be allowed in Smarty. JavaScript and CSS, didn't used to matter, why would someone built in problems?

I'll Check it out though, to confirm.


Delimiters {} have always needed escapement in Smarty 2. Smarty 3 improved upon this, as they are ignored if surrounded by white space. This behavior is disable-able too. Unless you are talking about something else? I don't know what you mean by "didn't used to matter", because it did. Maybe you had adjusted Smarty's default delimiters to make it "not matter" any more?

In any event with Smarty 3, make sure { and } are surrounded by whitespace and Smarty will ignore them. Another approach is to change Smarty's delimiters to something else. Otherwise there is no reliable way to discern the difference between js/css braces and Smarty tag delimiters. It has always been that way, nothing changed about it.
Back to top
View user's profile Send private message Visit poster's website
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Thu Mar 08, 2012 1:13 pm    Post subject: Reply with quote

So, the literal tags seem to have fixed the issue. However, I'm not happy about having to mark up all of my templates, in order to get a website to work. Its one thing to have to use Smarty Tags to mark up templates that change, but completely different to mark up templates that never change.

As far as always having had to use them...

I'm not so sure about that. Here is a site, which was created years ago, and Smarty has never been updated on it. The only things ever updated with this website were the HTML markup to HTML5 compliant markup and the CSS to CSS3 compliant code.

There are no literal tags or any kind of delimiters around the JavaScript on this website, and it works just fine.
Back to top
View user's profile Send private message
douglassdavis
Smarty Junkie


Joined: 21 Jan 2008
Posts: 541

PostPosted: Thu Mar 08, 2012 1:46 pm    Post subject: Reply with quote

bamajr wrote:

As far as always having had to use them...

I'm not so sure about that.


It's always been the same.

If you did not have to use literal or rdelim/ldelim tags, either the content with the JS isn't coming from a template, the delimiters aren't {}, or smarty 3 is used and there is whitespace surrounding the delimiters.
Back to top
View user's profile Send private message
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Thu Mar 08, 2012 2:31 pm    Post subject: Reply with quote

douglassdavis wrote:
bamajr wrote:

As far as always having had to use them...

I'm not so sure about that.


It's always been the same.

If you did not have to use literal or rdelim/ldelim tags, either the content with the JS isn't coming from a template, the delimiters aren't {}, or smarty 3 is used and there is whitespace surrounding the delimiters.


footer.tpl

Code:

   </div>
    <div id="footer">
   
<embed type="application/x-shockwave-flash" src="/flash/footer.swf" width="800" height="150" id="VideoPlayer" bgcolor="#000000" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque">   
   
     <script type="text/javascript">
      // <![CDATA[
      
      var so = new SWFObject("flash/footer.swf", "sotester", "800", "150", "8", "#ffffff");
      so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
      so.write("footer");
      
      // ]]>
     </script>
    </div>
  </div>
<footer>
   Designed by <a href="http://bamajr.com/resume/portfolio-of-web-sites/" target="_parent">Bamajr</a>, exclusively for:<br />
   <a href="http://sapphiresolutionsltd.com" target="_parent">Copyright&nbsp;&copy;&nbsp;2010.&nbsp;-&nbsp;bamajr.com</a>&nbsp;|&nbsp;All Rights Reserved.<br />
    &nbsp;<br />
   <a href="http://www.w3.org/html/logo/" target="_blank"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics" /></a><br />
    <a href="http://validator.w3.org/check/referer" target="_blank">HTML5 Valid</a>&nbsp;|&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS3 Valid</a>
</footer>

</body>
</html>


This site went live with what ever version of Smarty was available January 25th, 2007 (Not Smarty 3). No "literal" and no "rdelim/ldelim" tags.

EDIT:

Code:

 * @package Smarty
 * @version 2.6.14


Smarty 2.6.14 is the version I used when building this specific website/theme. It is the same version I used for about 5 other websites at that time. Never had to use "literal" and no "rdelim/ldelim" tags in order for JavaScript to work, for any of those websites.

Incidentally, while the forums show me as a Smarty nOOb, I've actually been using Smarty since late 2006 (before sites went live in January of 2007).
Back to top
View user's profile Send private message
douglassdavis
Smarty Junkie


Joined: 21 Jan 2008
Posts: 541

PostPosted: Thu Mar 08, 2012 2:46 pm    Post subject: Reply with quote

Ok. I see where the misunderstanding is here.

The problem is not the javascript language. Smarty doesn't know or care about the javascript language.

The problem is any non-Smarty delimiters, { or }, that appear in the code, no matter whether it's javascript, CSS or just some text in a paragraph that happens to contain a {.

Smarty, by default uses { and }. Javascript also uses { and } some times but not always! Anytime you use { or } and it's not smarty, you need to use {literal}.

btw: I have always changed my smarty delimiters to <{ }> since the days of smarty 2, so I have never had this problem.


Last edited by douglassdavis on Thu Mar 08, 2012 4:01 pm; edited 1 time in total
Back to top
View user's profile Send private message
douglassdavis
Smarty Junkie


Joined: 21 Jan 2008
Posts: 541

PostPosted: Thu Mar 08, 2012 3:22 pm    Post subject: Reply with quote

Docs on this subject for smarty 2 are here:

http://www.smarty.net/docsv2/en/language.escaping.tpl
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7366
Location: Lincoln Nebraska, USA

PostPosted: Thu Mar 08, 2012 3:58 pm    Post subject: Reply with quote

bamajr wrote:
douglassdavis wrote:
bamajr wrote:

As far as always having had to use them...

I'm not so sure about that.


It's always been the same.

If you did not have to use literal or rdelim/ldelim tags, either the content with the JS isn't coming from a template, the delimiters aren't {}, or smarty 3 is used and there is whitespace surrounding the delimiters.


footer.tpl

Code:

   </div>
    <div id="footer">
   
<embed type="application/x-shockwave-flash" src="/flash/footer.swf" width="800" height="150" id="VideoPlayer" bgcolor="#000000" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque">   
   
     <script type="text/javascript">
      // <![CDATA[
      
      var so = new SWFObject("flash/footer.swf", "sotester", "800", "150", "8", "#ffffff");
      so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
      so.write("footer");
      
      // ]]>
     </script>
    </div>
  </div>
<footer>
   Designed by <a href="http://bamajr.com/resume/portfolio-of-web-sites/" target="_parent">Bamajr</a>, exclusively for:<br />
   <a href="http://sapphiresolutionsltd.com" target="_parent">Copyright&nbsp;&copy;&nbsp;2010.&nbsp;-&nbsp;bamajr.com</a>&nbsp;|&nbsp;All Rights Reserved.<br />
    &nbsp;<br />
   <a href="http://www.w3.org/html/logo/" target="_blank"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics" /></a><br />
    <a href="http://validator.w3.org/check/referer" target="_blank">HTML5 Valid</a>&nbsp;|&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS3 Valid</a>
</footer>

</body>
</html>


This site went live with what ever version of Smarty was available January 25th, 2007 (Not Smarty 3). No "literal" and no "rdelim/ldelim" tags.

EDIT:

Code:

 * @package Smarty
 * @version 2.6.14


Smarty 2.6.14 is the version I used when building this specific website/theme. It is the same version I used for about 5 other websites at that time. Never had to use "literal" and no "rdelim/ldelim" tags in order for JavaScript to work, for any of those websites.

Incidentally, while the forums show me as a Smarty nOOb, I've actually been using Smarty since late 2006 (before sites went live in January of 2007).



That footer.tpl file contains no {} chars, so there should be no reason to wrap anything in {literal} tags. Smarty only needs to know if it should treat {} tags as Smarty tags or not. What error are you getting when you include this footer.tpl file?
Back to top
View user's profile Send private message Visit poster's website
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Thu Mar 08, 2012 4:31 pm    Post subject: Reply with quote

douglassdavis wrote:
Ok. I see where the misunderstanding is here.

The problem is not the javascript language. Smarty doesn't know or care about the javascript language.

The problem is any non-Smarty delimiters, { or }, that appear in the code, no matter whether it's javascript, CSS or just some text in a paragraph that happens to contain a {.

Smarty, by default uses { and }. Javascript also uses { and } some times but not always! Anytime you use { or } and it's not smarty, you need to use {literal}.

btw: I have always changed my smarty delimiters to <{ }> since the days of smarty 2, so I have never had this problem.


Okay, so...

because the JavaScript/Embed I was using back in 2007 didn't have { or }, in the code, I didn't have to worry about interference from Smarty.

The JavaScript code, on the new page, in question, definitely had { & } in it. So I have to tell Smarty to ignor it, in order for it to work correctly, by using {literal} and {rdelim} {ldelim} tags.

This issue highlights one of the reasons, I haven't been using Smarty, as much, recently. All the websites I design, start with a single .HTML file with the needed .CSS file(s). As functionality is added, JavaScripts gets added. When the design is completed, I chop it up into Smarty .tpl files, so, other people can add the content, without messing with the structure/design.

When I have .tpl files, which I do not need to use any Smarty code in, I don't want to have to touch it, not even to put in {literal} and/or {rdelim} {ldelim} tags.

Neither do I want to list a whole bunch of includes (I.E. {config_load file="main.conf" section="setup"}, {include file="header.tpl" title=Home} and {include file="footer.tpl"}). I want other people to simply be able to mark up their content with HTML and name their file SOMETHING.tpl and drop it in. Instead, each file has all this extra garb. in it.

What happened to the days when the index.php file directed Smarty on what to load and when?

In 2007 I used Smarty, with an index.php file that looked like this:

Code:

<?php

require 'libs/Smarty.class.php';
$smarty=new Smarty;
$smarty->compile_check=true;
$smarty->debugging=false;

$template = 'index.tpl';

if ($_GET['view'] == 'aboutme') {
    $template = 'aboutme.tpl';
}   
else if ($_GET['view'] == 'business') {
    $template = 'business.tpl';
}
else if ($_GET['view'] == 'marykay') {
    $template = 'marykay.tpl';
}
else if ($_GET['view'] == 'sitemap') {
    $template = 'sitemap.tpl';
}

$smarty->display('header.tpl');
$smarty->display('left.tpl');
$smarty->display($template);
$smarty->display('footer.tpl');

?>


...and the only time I had to add Smarty code to a .tpl file, is if there was a feature/function I wanted to add. For this specific site, not a single .tpl file had any smarty code in it.
Back to top
View user's profile Send private message
douglassdavis
Smarty Junkie


Joined: 21 Jan 2008
Posts: 541

PostPosted: Thu Mar 08, 2012 4:39 pm    Post subject: Reply with quote

bamajr wrote:
douglassdavis wrote:
Ok. I see where the misunderstanding is here.

The problem is not the javascript language. Smarty doesn't know or care about the javascript language.

The problem is any non-Smarty delimiters, { or }, that appear in the code, no matter whether it's javascript, CSS or just some text in a paragraph that happens to contain a {.

Smarty, by default uses { and }. Javascript also uses { and } some times but not always! Anytime you use { or } and it's not smarty, you need to use {literal}.

btw: I have always changed my smarty delimiters to <{ }> since the days of smarty 2, so I have never had this problem.


Okay, so...

because the JavaScript/Embed I was using back in 2007 didn't have { or }, in the code, I didn't have to worry about interference from Smarty.

The JavaScript code, on the new page, in question, definitely had { & } in it. So I have to tell Smarty to ignor it, in order for it to work correctly, by using {literal} and {rdelim} {ldelim} tags.

This issue highlights one of the reasons, I haven't been using Smarty, as much, recently. All the websites I design, start with a single .HTML file with the needed .CSS file(s). As functionality is added, JavaScripts gets added. When the design is completed, I chop it up into Smarty .tpl files, so, other people can add the content, without messing with the structure/design.

When I have .tpl files, which I do not need to use any Smarty code in, I don't want to have to touch it, not even to put in {literal} and/or {rdelim} {ldelim} tags.

Neither do I want to list a whole bunch of includes (I.E. {config_load file="main.conf" section="setup"}, {include file="header.tpl" title=Home} and {include file="footer.tpl"}). I want other people to simply be able to mark up their content with HTML and name their file SOMETHING.tpl and drop it in. Instead, each file has all this extra garb. in it. What happened to the days when the index.php file directed Smarty on what to load and when?


I'm not sure if I understand, so your template files that other people are providing don't have smarty in them, just HTML and Javascript? If so, why use Smarty templates for that part at all?

We don't know how your system works, whether you have a bunch of includes, or index.php directs "Smarty on what to load and when" but that part is up to you.
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7366
Location: Lincoln Nebraska, USA

PostPosted: Thu Mar 08, 2012 4:41 pm    Post subject: Reply with quote

Code:
What happened to the days when the index.php file directed Smarty on what to load and when?


The index.php file has nothing to do with Smarty, you must be referring to something that was setup by your PHP developer at that time. (or something in a 3rd party application that uses Smarty.)

Smarty 2 has always had the issue with {} and literal tags. However as we have stated, Smarty 3 does have a new feature to help alleviate the problem. So long as {} tags are surrounded by white space, Smarty will ignore them. So, just format your js/css like so:

Code:
function foo()
{
  alert('test');
}


See how {} are on lines by themselves. They will be ignored, no literal tags necessary. This also works:


Code:
function foo() { alert('test'); }


Notice the space next to the {} tags. Smarty also ignores them. This however, requires literal tags:

Code:
function foo() {alert('test');}


{} tags are butted up against the content, Smarty needs literal tags to indicate they should be ignored.
Back to top
View user's profile Send private message Visit poster's website
bamajr
Smarty Rookie


Joined: 22 Feb 2008
Posts: 10
Location: Woodbury, MN

PostPosted: Thu Mar 08, 2012 5:28 pm    Post subject: Reply with quote

douglassdavis wrote:
I'm not sure if I understand, so your template files that other people are providing don't have smarty in them, just HTML and Javascript?


If you look at the index.php file I included in my last post, you can see, the index.php file handled all the includes, using:

Code:

$smarty->display('header.tpl');
$smarty->display('left.tpl');
$smarty->display($template);
$smarty->display('footer.tpl');


header.tpl, left.tpl and footer.tpl, never changed and didn't contain any content which was subject to change.

HEADER.TPL
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Anne's Consulting - Designed by Bamajr</title>

<!-- Main JavaScripts -->
<script type="text/javascript" src="../scripts/swfobject.js"></script>
<script type="text/javascript" src="../scripts/primary.js"></script>

<!-- Favorites Icon -->
<link rel="shortcut icon" href="favicon.ico">

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
  <div id="wrapper">
    <div id="header">
     
    </div>


LEFT.TPL
Code:

    <div id="middle">
     <div id="left">
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      </div>


FOOTER.TPL
Code:

   </div>
    <div id="footer">
   
<embed type="application/x-shockwave-flash" src="/flash/footer.swf" width="800" height="150" id="VideoPlayer" bgcolor="#000000" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque">   
   
     <script type="text/javascript">
      // <![CDATA[
      
      var so = new SWFObject("flash/footer.swf", "sotester", "800", "150", "8", "#ffffff");
      so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
      so.write("footer");
      
      // ]]>
     </script>
    </div>
  </div>
<footer>
   Designed by <a href="http://bamajr.com/resume/portfolio-of-web-sites/" target="_parent">Bamajr</a>, exclusively for:<br />
   <a href="http://sapphiresolutionsltd.com" target="_parent">Copyright&nbsp;&copy;&nbsp;2010.&nbsp;-&nbsp;bamajr.com</a>&nbsp;|&nbsp;All Rights Reserved.<br />
    &nbsp;<br />
   <a href="http://www.w3.org/html/logo/" target="_blank"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics" /></a><br />
    <a href="http://validator.w3.org/check/referer" target="_blank">HTML5 Valid</a>&nbsp;|&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS3 Valid</a>
</footer>

</body>
</html>
 
<!-- edited by bamajr february 2012. -->
<!-- copyright  2012. bamajr.com - all rights reserved. -->


Notice how you don't see any {config_load file="main.conf" section="setup"}, {include file="header.tpl" title=Home} and {include file="footer.tpl"} code in these templates?

INDEX.TPL
Code:

      <div id="right">
       <br>
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;Home text</h3>
        <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>
      </div>


ABOUTME.TPL
Code:

      <div id="right">
       <br>
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;About Me text</h3>
        <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>
      </div>


Notice how you still don't see any {config_load file="main.conf" section="setup"}, {include file="header.tpl" title=Home} and {include file="footer.tpl"} code in these templates?

Yet if you go to http://annesconsulting.bamajr.com/ and click on the "About Me" button, it still navigates correctly to the aboutme.tpl file. Do you see the role index.php file had? Do you see how this is different from the standard Smarty 3.0 index.php file?

douglassdavis wrote:
...why use Smarty templates for that part at all?


We used Smarty, because the .tpl files that never changed (header, left, and footer), were cached, speeding up the UI for those who were browsing the page.

douglassdavis wrote:
We don't know how your system works, whether you have a bunch of includes, or index.php directs "Smarty on what to load and when" but that part is up to you.


To my knowledge, Smarty, whether version 2 or 3, wont work, without an index.php file (or a file, playing the same role as the index.php file).

As you can see, there are not any includes, at all, and this was just a basic install of Smarty, with no custom configurations.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> Smarty 3 All times are GMT
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP