rails要按重整才會載入java script效果


#1

為什麼在rails的頁面裡用jquery的效果都不會顯示要按F5才會載入這個效果呢??


#2

不確定,請給我你的"HTML"即可,否則沒人可以幫你 debug,and 這也是問問題的禮貌就是


#3

抱歉,下次會注意。

【CSS】

#map-container { 
  height: 350px;
}

【HTML】

 <div class="container-fluid">
     <div class="row">
         <div  id="map-container" class="col-md-10 col-md-offset-1"></div>
     </div><!-- /row -->
</div>

【javascript】

<script>
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src="http://maps.google.com/maps/api/js?sensor=false&callback=init_map";
    document.body.appendChild(script);
}
window.onload = loadScript;

function init_map () {
  var myLatlng = new google.maps.LatLng(22.999083, 120.212803);

  var myOptions={
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl : false,
    navigationControl : false,
    scaleControl : false,
    streetViewControl : false 
  }

  var var_marker = new google.maps.Marker({
      position:myLatlng,
      map:var_map,
      title:"臺南文化創意產業園區"});

   var var_map = new google.maps.Map(document.getElementById("map-container"),myOptions);
   var_marker.setMap(var_map); 
  
  var infowindow = new google.maps.InfoWindow({
  content: '<strong>台南文創園區</strong><br />台南市東區北門路二段16號<br> ',
  size: new google.maps.Size(200, 200)
  });
  google.maps.event.addListener(var_marker, 'click', function() {
  });
  infowindow.open(var_map,var_marker);

}
</script>

#4

…你的順序寫錯了…and你可以不用最後的 callback=init_map 段
改成類似這樣唄

<html>
  <head>
    <!-- css here -->
  </head>
  <body>
    <!-- content here -->
    <!-- js here -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
      //function init_map(){} //放這邊
      //等同onload,能確保js load結束 , 用Rails一定有jquery_ujs也代表你一定有jQuery可用
      jQuery(function($){  
        init_map(); //執行init_map
      });
    </script>
  </body>
</html>

問題點在於你之前的寫法會怪怪的,類似 script load 結束才去插入 script 去 load 回 js 檔…這樣做有點脫褲子放屁,and 這件事情基本上就是攻擊的一種 X"D 所以建議你直接寫 html,如果有這種動態載入javascript的需求,請用 http://requirejs.org/ 來玩唄

另外一個點是…map讀取結束這件事情 http://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded

也就是你可能還沒等到map讀取結束就開始塞座標點之類的,anyway以上給你參考


#5

了解,原來是順序錯誤。謝謝