CODEWITHSUNDEEP
javascripthtmlruby-on-railsruby
Casey Cao
Casey Cao

Reputation: 341

js doesn't load properly with ruby on rails

On my index I have <a href="/dashboard/gov.html">Government dashboard</a> which links to my gov page, and on my gov page I have google map api and my own javascripts. But only one of my own js works fine when I click the link to gov page. The odd thing is if I just reload gov.html(or set it as root) in stead of click the link to redirect all seem work fine.

Here is the html part which doest work:

<div  id='map'  style='height:280px; width:400px' />  

<script  src="https://maps.googleapis.com/maps/api/js?key=XXX"></script>  

<script>  
      var  map  =  new  google.maps.Map(document.getElementById('map'),  {  
                  center:  new  google.maps.LatLng(31.267401,  121.522179),  
                  mapTypeId:  google.maps.MapTypeId.ROADMAP,  
                  zoom:  11  
              });  

                              var  t  =  new  Date().getTime();  
      var  waqiMapOverlay  =  new  google.maps.ImageMapType({  
                  getTileUrl:  function(coord,  zoom)  {  
                            return  'http://tiles.aqicn.org/tiles/usepa-aqi/'  +  zoom  +  "/"  +  coord.x  +  "/"  +  coord.y  +  ".png?token=_TOKEN_ID_";  
                  },  
                  name:  "Air  Quality",  
        });  

      map.overlayMapTypes.insertAt(0,waqiMapOverlay);  
</script>

    </th>
    <th><img id="imgtraffic" width="395" height="280" /></th>
  </tr>
</table>

<table align="center" width="811" border="1">
  <tr>
    <td bgcolor="#9AD7F1" width="811">City Heat Map</td>
  </tr>
  <tr>
    <td><div id="container"></div>
     <div class="button-group">
      <input type="button" class="button" value="Show heat map" onclick="heatmap.show()"/>
      <input type="button" class="button" value="Close heat map" onclick="heatmap.hide()"/>
    </div>
    <script>
        var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.418261, 39.921984],
        zoom: 11
    });
    if (!isSupportCanvas()) {
         ...
    </script>

    </td>
  </tr>
</table>

Thanks a lot for your help.

Upvotes: 0

Views: 829

Answers (2)

Casey Cao
Casey Cao

Reputation: 341

Thanks all, actually by just simply modify the property of the link

<%= link_to 'Government dashboard', "/dashboard/gov.html", data: { turbolinks: 'false'} %>

to disable turbolins is ok.

Upvotes: 0

Alex Zakruzhetskyi
Alex Zakruzhetskyi

Reputation: 1433

Try to put your code inside

$( document ).on('turbolinks:load', function() {
  Your code here
})

Upvotes: 3

Related Questions