Play Framework: How to call a Javascript Function from a Scala Template

Question

I have a scala template that shows a bunch of Model objects and gives the user the option to add or delete these objects.

Each model object has some location data associated with it. I'd like to embed a Google Map on the page, and as users manipulate (add,delete,edit,load) place a marker for each Model object on the map.

I can get the map loaded correctly, but I don't understand how to call my JS functions from the Scala template directly. My template looks like this:

    @(stupas:List[Stupa], stupaForm:Form[Stupa])
@import helper._
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=apiKey"></script>
    <script type="text/javascript">
        var map;
        function initialize() {
            var mapOptions = {
                center: { lat: -34.397, lng: 150.644},
                zoom: 8
            };
            map = new google.maps.Map(document.getElementById('map_canvas'),
                    mapOptions);
            console.log("map should be init now");
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        function addLocation(lat, lon, name) {
            var latLng = new google.maps.LatLng(lat,lon);
            var marker = new google.maps.Marker({
                position: myLatlng,
                title:name
            });
            marker.setMap(map);
        }
    </script>

</head>
<body>
    <h1> Stupas Overview </h1>
    <div id="map_canvas" style="height: 430px; width: 512px; float:right; top:0px"></div>

    <ul>
        @for(stupa <- stupas) {
         <li>@stupa.stupaName</li>
            <ul>
                <li>Description: @stupa.descritpion</li>
                <li>Latitude: @stupa.latitude</li>
                <li>Longitude: @stupa.longitude</li>
                <img src="@routes.StupaController.getImageForStupa(stupa.stupaName)"/>
                @form(routes.StupaController.delete(stupa.stupaName)) {
                    <input type="submit" value="Remove Stupa">
                }
            </ul>
        }

    </ul>

    @helper.form(action = routes.StupaController.submit, 'enctype -> "multipart/form-data") {
        @helper.inputText(stupaForm("stupaName"))
        @helper.inputText(stupaForm("description"))
        @helper.inputText(stupaForm("latitude"))
        @helper.inputText(stupaForm("longitude"))
        @helper.inputFile(stupaForm("picture"))
        <button type="submit" onclick="" name="addPrayer" >Submit Stupa</button>
    }

</body>

I'd like to be able to call that addLocation() function.

Himanshu Goel Himanshu Goel · Accepted Answer · 2015-06-11T05:45:18

Scala template cannot call javascript function as scala template is just rendering the page on server side and javascript function needs to executed from browser on/after loading page. So in your script you can make document.ready function and inside it call addLocation() function, use scala to print parameter in that function call. So idea is that when your browser will execute the function it will be showing you values not parameters.

Play Framework: How to call a Javascript Function from a Scala Template

1 Answers