Jump to:

3432 Posts in 1025 Topics by 865 members

Template Questions

SilverStripe Forums » Template Questions » use silverstripe in javascript files

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

Page: 1
Go to End
Author Topic: 1972 Views
  • snaip
    Avatar
    Community Member
    180 Posts

    use silverstripe in javascript files Link to this post

    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 ?

  • iroy2000
    Avatar
    Community Member
    15 Posts

    Re: use silverstripe in javascript files Link to this post

    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.

  • snaip
    Avatar
    Community Member
    180 Posts

    Re: use silverstripe in javascript files Link to this post

    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

  • iroy2000
    Avatar
    Community Member
    15 Posts

    Re: use silverstripe in javascript files Link to this post

    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.

  • iroy2000
    Avatar
    Community Member
    15 Posts

    Re: use silverstripe in javascript files Link to this post

    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.

  • snaip
    Avatar
    Community Member
    180 Posts

    Re: use silverstripe in javascript files Link to this post

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

    1972 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.