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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

How to add JavaScript into the content of page


Go to End
Reply


9 Posts   2341 Views

Avatar
demmy

Community Member, 6 Posts

2 December 2011 at 4:39pm

Dear All,

I am very new in silverstripe, i start from the tutorial template and just finish to make some layout in the front page, now I try to add some javascript into the content of the main page.

example: add javascript of Google Maps API3, where should I add? page.ss or page.php??

Thanks.
Demmy

Avatar
stallain

Community Member, 61 Posts

3 December 2011 at 2:12am

Hi,
My solution is probably not the best, but I usually :
- put the requirement to the googleapi js file in my page.php controller

Requirements::javascript('http://maps.googleapis.com/maps/api/js?sensor=false');


- put the rest of js code in the template. It enables me to insert variables directly in the js code, so that the user can change parameters in the cms (lat/long, zoom factor, etc.).

<script type="text/javascript">function initialize() {...


Stan

Avatar
Nivanka

Community Member, 400 Posts

3 December 2011 at 3:39pm

sometimes if you want to insert any JS in the head of the document, you can use Requirements::insertHeadTag function this is very useful when you want to include modernizr js etc.

Avatar
demmy

Community Member, 6 Posts

4 December 2011 at 7:34pm

Dear Stan,

Thanks, but i'm still not clear about this point,

- put the rest of js code in the template. It enables me to insert variables directly in the js code, so that the user can change parameters in the cms (lat/long, zoom factor, etc.).

can you explain a bit clearer than this?

Best Regards;
BOly

Avatar
stallain

Community Member, 61 Posts

4 December 2011 at 10:59pm

Edited: 04/12/2011 11:00pm

@Demmy, sorry if I wasn't clear. I give you an exemple : I wanted my client to be able to change the position of the "coloured pin" on his Google Map.

I added a DB field named "GPS" in my ContactPage.php (ContactPage.ss is the template where I display the map) :

<?php
class PageContact extends Page {
public static $db = array(
'GPS' => 'Text'
);
...
function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab('Root.Content.GoogleMap', new TextField('GPS', 'Coordonnées GPS (format : 47.338979,1.00158)')); return $fields;
}

And in ContactPage.ss :

<% if GPS %>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(
{$GPS});
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("GMap"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"$SiteConfig.Title",
visible:true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="GMap">
</div>
<% end_if %>

The map displayed in the site is centered on the position entered by the client in the CMS.

Avatar
stallain

Community Member, 61 Posts

4 December 2011 at 11:10pm

@Nivanka - Thanks, I didn't know there was a way to choose scripts that have to be in the <head> section, while the others remain at the end of the document !

Avatar
demmy

Community Member, 6 Posts

5 December 2011 at 3:49am

Edited: 05/12/2011 3:58am

Dear Stan,

Many thanks. Many thanks.

I try it now, and i did not see any error, but i cannot see the Google map display on my page, its just blank screen.

do you know what is the problem?

Best Regards;
Boly

PS: If you don't mind, can you give me an email address? and can I ask you directly by email?

Avatar
stallain

Community Member, 61 Posts

5 December 2011 at 5:46am

If possible, can you give me the URL of your project ?
My e-mail : stallain@gmail.com

Go to Top