including smarty kills javascript

[turpentyne]

I have a simple javascript to rotate through images and text within a global variable. I want the text to be pulled from three other global variables, so that the original script doesn't have to be touched. This is where my problem is. I have the script inside {literal} tags, and it works on its own.

But when I escape out of literal, to drop in my global items for the variables, the script stops working.

Here's what I have:

Code: Select all

<div id="slidertext">nothing at first</div>
{literal}
<__script__ type="text/javascript">// <![CDATA[
$(document).ready(function() {
var slidetext1 = '{/literal}{global_content name="slidetext1"}{literal}';
var slidetext2 = '{/literal}{global_content name="slidetext2"}{literal}';
var slidetext3 = '{/literal}{global_content name="slidetext3"}{literal}';

/* if these are set to this, it'll work: 
var slidetext1 = '<h1>text from <span id="sample">global variable</span><h1>'; */

var newBg = ['slide1.jpg', 'slide2.jpg','slide3.jpg'];
var newContent = [slidetext1,slidetext2,slidetext3];
var path="uploads/images/slides-main/";
var i = 0;
var i2 = 0;
var rotateBg = setInterval(function(){
    $('#sliderbg').css('backgroundImage' ,  "url('" +path+newBg[i]+ "')");
    if(i==2)
     i=0;
     else
      i++;
}, 4400);

var rotateBg = setInterval(function(){
 $('#slidertext').html(newContent[i2]);
    if(i2==3)
     i2=0;
     else
      i2++;
}, 4400);

});
// ]]></__script>
{/literal}

[rotezecke]

what code is delivered to the client (view source)? are the GCBlocks parsed at all?

[turpentyne]

It shows the variables have the code just as I want. But nothing executes.
I don't think it's getting parsed by anything.


Here's the source code end-result:

Code: Select all

<div id="slidertext">nothing at first1</div>

<__script__ type="text/javascript">// <![CDATA[
$(document).ready(function() {
var slidetext1='<span class="item1">OFFER 1</span><h2>Save up to $500</h2><h3>line three</h3><div id="offer-button1">Lets get started &raquo;</div>
';
var slidetext2='<span class="item1">OFFER 2</span><h2>Grocer rates</h2><h3>Find out more</h3>';
var slidetext2='<span class="item1">OFFER 3</span><h2>Save up to $500</h2><h3>line three</h3><div id="offer-button1">Lets get started &raquo;</div>';

var newBg = ['slide1.jpg', 'slide2.jpg','slide3.jpg'];
var newContent = [slidetext1,slidetext2,slidetext3];
var path="uploads/images/slides-main/";
var i = 0;
var i2 = 0;
var rotateBg = setInterval(function(){
    $('#sliderbg').css('backgroundImage' ,  "url('" +path+newBg[i]+ "')");
    if(i==2)
     i=0;
     else
      i++;
}, 4400);

var rotateBg = setInterval(function(){
 $('#slidertext').html(newContent[i2]);
    if(i2==2)
     i2=0;
     else
      i2++;
}, 4400);

});
// ]]></__script>

[Rolf]

Read GCBs in PHP http://docs.cmsmadesimple.org/tags/user ... t#call-gcb

[rotezecke]

you defined

Code: Select all

var slidetext2

twice in that code. (and slidetext3 is missing).
most modern browsers now have tools that help you with javascript errors.

[turpentyne]

Thank you both for your response. The second response is just catching a typo - not the lack of browser error checking, or the core of my issue. Still, thank you for noticing the typo.

The first suggestion seems closer to what I'm trying to understand. But I'm a little confused when I read the suggested content. Is there other explanations / tutorials / examples somewhere, to help me understand?

I guess my first confusion is "where do I actually create the UDT?"

[turpentyne]

Ok... Scratch that. I found it.

The first link left out the "where". This explains:
http://demo.opensourcecms.com/cmsmadesi ... fined-tags

[Jo Morg]

Try this:

Code: Select all

<div id="slidertext">nothing at first1</div>

<__script__ type="text/javascript">// <![CDATA[
{literal}
$(document).ready(function() {
var slidetext1 = '{/literal}{global_content name="slidetext1"}{literal}';
var slidetext2 = '{/literal}{global_content name="slidetext2"}{literal}';
var slidetext3 = '{/literal}{global_content name="slidetext3"}{literal}';

var newBg = ['slide1.jpg', 'slide2.jpg','slide3.jpg'];
var newContent = [slidetext1,slidetext2,slidetext3];
var path="uploads/images/slides-main/";
var i = 0;
var i2 = 0;
var rotateBg = setInterval(function(){
    $('#sliderbg').css('backgroundImage' ,  "url('" +path+newBg[i]+ "')");
    if(i==2)
     i=0;
     else
      i++;
}, 4400);

var rotateBg = setInterval(function(){
 $('#slidertext').html(newContent[i2]);
    if(i2==2)
     i2=0;
     else
      i2++;
}, 4400);

});
{/literal}
// ]]></__script>  

and remember to change back the script tags. I didn't test it live but on my editor the syntax highlighter doesn't complain...
HTH.