[Solved] Pass value of a Smarty array to a Javascript array?

[applejack]

Hi

I am trying to find out if it is possible to pass the value of a Smarty variable to a Javascript variable and if so how (as in syntax).

The Javascript code is enclosed by {literal} tags

[viebig]

try

Code: Select all

<__script__ type="text/javascript">

var smarty = '{$smartyvar}'; 

{literal}

// rest off the script that contisn brackets

</__script>
{/literal}

[applejack]

Hi Viebig

Thanks for that it worked but I haven't been able to work out how to do what I need to which if you know would be a great help to me.

I am trying to pass the values of a smarty loop into a javascript array. I suspect I may have to first pass the values to a Smarty array and then assign that to the javascript array but I am unsure how to declare a smarty variable as an array. This has to happen in a template because I am using smarty to dig out the data. i.e.



var data = new Array();

{foreach from=$cgsimple->get_children('$page_alias','0') item='child' key='k'}
{assign var='smarty_data' value=$cgsimple->get_page_content($child.alias,'Photo_Name')}
data = {$smarty_data};
{/foreach}

{literal}
// the values of the javascript array data are used in the function below

window.addEvent('domready', function() {
var myShow = new Slideshow.KenBurns('show', data, { captions: true, controller: true, delay: 4000, duration: 2000, height: 515, hu: '/uploads/filepath/', width: 774 });
})

{/literal}



So instead of having data = {$smarty_data}; in the loop I presume I need to use a Smarty arry to capture the data and then pass it to the javascript data array after the loop has finished.


All and any help much appreciated.

[viebig]

you can crate a javascript array like

Code: Select all

myArray = new Array(15,89,4,61,5) 

so.. try to do something like

Code: Select all

myArray = (
{foreach array}
array->value,
{/foreach}
);

this shoud make a js array like

Code: Select all

myArray = (value1,value2,value3,...);

Then you can pass it to your script

[applejack]

Hi Viebig

Thanks once again. I am getting closer but not quite there yet.

CODE IS

****************************************************************



// var data = new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');

var data = new Array();

data = (
{foreach from=$cgsimple->get_children($page_alias,'0') item='child' name=children}
{if $smarty.foreach.children.last}
'{$cgsimple->get_page_content($child.alias,'Photo_Name')}'
{else}
'{$cgsimple->get_page_content($child.alias,'Photo_Name')}',
{/if}
{/foreach}
);

{literal}
alert(data);
window.addEvent('domready', function(){
var myShow = new Slideshow('show', data, { captions: true, controller: true, delay: 4000, duration: 2000, height: 515, hu: '/uploads/photos/london/landscape/1000pix/', width: 774 });
});

//]]>

{/literal}


***************************************************************

OUTPUT IS




// var data = new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');

var data = new Array();

data = (
'1.jpg',
'2.jpg',
'3.jpg'
);


alert(data);
window.addEvent('domready', function(){
var myShow = new Slideshow('show', data, { captions: true, controller: true, delay: 4000, duration: 2000, height: 515, hu: '/uploads/photos/london/landscape/1000pix/', width: 774 });
});

//]]>


***************************************************************


The alert on data only give 3.jpg whereas if I use the manually array var data = new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'); the alert shows all objects.

Any idea?

See http://www.clivegrylls.com/photos/londo ... landscape/

This is how it is supposed to work

http://www.clivegrylls.com/photos/india ... landscape/

[viebig]

that was my fault!

look whta is being generated:

Code: Select all

data = (
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg',
'6.jpg',
'7.jpg',
'8.jpg',
'10.jpg',
'11.jpg',
'12.jpg'
)

it should be 'var data = new Array(' and have a ';' in the end

like

Code: Select all

var data = new Array(
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg',
'6.jpg',
'7.jpg',
'8.jpg',
'10.jpg',
'11.jpg',
'12.jpg'
);

so must be it, don forget to applaud me if you think it´s helpful, and by the way.. nice site!

[applejack]

Hi Viebig

I got it working. The problem was that you have to collect the data in a different array outside of the literal tag but then pass it to a new array inside the literal tag. Code is below and I really appreciate your help thanks very much.

{ * The values contained in the Photo Name block are just numbers which refer to the image name which is why there needs to be concatenation of the single quotes, .jpg and the comma (except on the last array value) as this a a requirement of the javascript function * }

{assign var='pg' value=$cgsimple->get_parent_alias()}


var myArray = new Array(
{foreach from=$cgsimple->get_children($pg,'0') item='child' name=children}
{if $smarty.foreach.children.last}
{assign var='quot' value="'"}
{assign var='cont' value=$cgsimple->get_page_content($child.alias,'Photo_Name')|cat:'.jpg'|cat:"'"}
{$quot|cat:$cont}
{else}
{assign var='quot' value="'"}
{assign var='cont' value=$cgsimple->get_page_content($child.alias,'Photo_Name')|cat:'.jpg'|cat:"'"|cat:','}
{$quot|cat:$cont}
{/if}
{/foreach}
);

var mypage = "{$pagename}";
{literal}

var data = new Array();
data = myArray;

window.addEvent('domready', function(){
var myShow = new Slideshow('show', data, { captions: true, controller: true, delay: 4000, duration: 2000, height: 515, hu: '/uploads/photos/' + mypage + '/landscape/1000pix/', width: 774 });
});

//]]>

{/literal}

[Dr.CSS]

Very nice slide show, does it need any other scripts to run?...

[applejack]

Hi Mark

It can actually do more than you can see so far which I am still working on the coding as this is only half of it but I will post full details in a few days once I have sorted it out.

[viebig]

Mootools 1.2?

[applejack]

See http://www.electricprism.com/aeron/slideshow/

I haven't been able to get the captions working yet as in pulling the data from the content as the JS requires them to be enclosed within curly brackets. I tried concatenating them in a JS array loop but for some reason it didn't work and for this particular job I don't need it so I may not try fixing it.

If anyone tries it and manages to get it working then please post your solution here.