Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

use silverstripe in javascript files


Reply


6 Posts   2088 Views

Avatar
snaip

Community Member, 180 Posts

25 November 2010 at 11:32am

hi

i need to use silverstripe data in javascript file

simple example

<script>
alert($Title);
</script>

it works when these line of code are directly in the template file

page.ss

<html>
<head>
<script>
alert($Title);
</scirpt>
</head>
....
</html>

but when i separete this into javascirpt file and than inluding it doesnt work

alert.js

alert($Title);

page.ss

<html>
<head>
<script type="text/javascript" src="mysite/javascript/alert.js"></script>
</head>
....
</html>

it is quite strange :/ i dont want to put my javascript code into html file
how to solve this problem ?

Avatar
iroy2000

Community Member, 15 Posts

25 November 2010 at 11:42am

Instead of passing that template variable directly into your javascript code, you can read the text directly using javascript after the DOM loaded.

For example, using jQuery

var titleObject = $('your_class_that_holds_the_element');

And you can do whatever you want with that jQuery object. This is just my 2 cents.

Avatar
snaip

Community Member, 180 Posts

25 November 2010 at 11:57am

ya

but it is not what i want

i'm using google maps
in CMS i create a lot of objects with title, coordinates, images and than puts all off them into the map

so my javascript code looks like this

<script type="text/javascript">
function mapaStart() {
   var coordinates = new google.maps.LatLng($Lat,$Lng);
   var map_opctions = {
    zoom: 12,
    center: coordinates,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   };

var map = new google.maps.Map(document.getElementById("map"), map_opctions);

var size = new google.maps.Size(50,40);
var start_point = new google.maps.Point(10,35);
var connect_point = new google.maps.Point(25,30);

<% control ModuleObjects %>
<% control SiteTree.Parent %>
var icon= new google.maps.MarkerImage("$SiteTree.Image.URL", size, start_point, connect_point);
<% end_control %>

var marker_options = {
position: new google.maps.LatLng($SiteTree.Lat,$SiteTree.Lng),
map: map,
title: "$SiteTree.Title",
icon: icon
};
var marker = new google.maps.Marker(marker_options);
<% end_control %>
</script>

now just put this code into template and you will get hundreds of code lines which should be placed in a separeted javascript file

Avatar
iroy2000

Community Member, 15 Posts

25 November 2010 at 12:14pm

Edited: 25/11/2010 12:18pm

Hi, I saw that you have the logic like this

<% control ModuleObjects %>
<% control SiteTree.Parent %>
var icon= new google.maps.MarkerImage("$SiteTree.Image.URL", size, start_point, connect_point);
<% end_control %>
...

I wonder if you can do that in your html, you recreate a similar structure (or data format you need), but give it a "display:none" in there (so it won't show in the front end). The following is just an example:

<div style="display:none" class="data-map">
<div class="data">
<div class="url">your_image_url</div>
<div class="other">other data you need</div>
</div>
<div class="data">
<div class="url">your_image_url</div>
<div class="other">other data you need</div>
</div>
....
....
</div>

And now you have all the data you need, read it using javascript and loop that in your javacript code. You will still need the logic that you have now. but instead of feeding javascript in the template level, you pre-generate the data, and have javascript to read that.

Just my thoughts.

Avatar
iroy2000

Community Member, 15 Posts

26 November 2010 at 6:07am

Edited: 30/11/2010 6:52am

Btw, in your case, if you want to use your original method, have you tried this way??

You will see that I first assigned the variable into a js variable.

<script type="text/javascript">
var test = $Title;
</script>
<script src="js/alert.js"></script>

But this only works if your data type (e.g. $Title) is a primitive type. If you assigned anything other than a primitive type, it won't work. So that's why you may want to use the "pre-generated" method.

Avatar
snaip

Community Member, 180 Posts

27 November 2010 at 10:34am

thanks
i used your example to get html elements by JQuery and to generate google maps