17054


初心者です。

ご質問させて頂きます。

ローカル環境ではjqueryによるカレンダーが正常に表示されるのですが、herokuにpushした後、本番環境ではjqueryによるカレンダーが表示されません。どこに間違いがあるのでしょうか教えて頂けると幸いです。

[code]

    <!DOCTYPE html>
    <html>
      <head>
    <script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
    <script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
    <!-- jqueryの埋め込み -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
    
    <!-- jquery UI で　startを　ui-lightness等にかえることによりカレンダーのcssを変更可能 -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" >
    
    <!-- 地図の大きさ指定 -->
    <div style='width: 100%; height: 100%;'>
      <div id="custom_style" style='width: 100%; height: 100%;'></div>
    </div>
    
    <script type="text/javascript">
    
    var handler = Gmaps.build('Google');
    handler.buildMap
    ({ 
      provider:
       { zoom:      15,
          center:    new google.maps.LatLng(34.839449, 134.6939047),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles:    mapStyle}, 
    
          internal: {id: 'custom_style'}},
    
           function(){
            //マーカーを追加していく
            markers = handler.addMarkers(<%== @ash.to_json %>);
            markers = handler.addMarkers(<%== @hash.to_json %>);
    
      handler.bounds.extendWith(markers);
      handler.getMap().setZoom(yourValue);
    });
    </script>
    </head>
    
    <body onload="init()">
      <!-- 地図の右上にタイトル表示 -->
        <div id="custom_style" style="z-index:0; position:absolute;"></div>
        <img src="/assets/icon.png"
           style="z-index:1;position:absolute;left:90px;top:10px;" />
    
    <!-- カレンダーの表示　-->
    <div id ="calendar">
      <script>
      $(function() {
        $("#datepicker").datepicker();
      });
    </script>
    <!-- hiddenをtextにかえると日付のテキストボックスが出てくる -->
     <input type="hidden" id="datepicker" >
    
      <script >
      $(function() {
        $("#datepicker").datepicker();
        $("#datepicker").datepicker("option", "showOn", 'button');
        $("#datepicker").datepicker("option", "buttonImageOnly", true);
        $("#datepicker").datepicker("option", "buttonImage", '/assets/icon_calendar.png');
    
      });
    
      <!-- 日付の取得 -->
      $("#calender").datepicker({
    onSelect: function(dateText, inst) { 
    var date1 = dateText; // 08/13/2014の形
    var date2 = $(this).datepicker( 'getDate' ); //　Wed Aug 13 2014 00:00:00 GMT+0900　の形
    alert(date1);
    }
    });
    
      <!-- 日付選択時のアクション -->
     $('#datepicker').datepicker({
      onSelect: function(dateText, inst){
        alert(dateText);
      }
    });
    </script>
    </div>
      </body>
    
    </html>
    
[/code]


CC BY-SA 3.0
2015-09-29T06:34:27.230
17053
2015-09-29T08:31:28.887
2015-09-29T07:02:55.603
208
12443
question
jquery heroku
herokuの本番環境ではjqueryのdatepickerのカレンダーが表示されない。


直接の回答ではないのですが、  
ローカルでは開けるものがサーバーだと開けない、ということは外部参照するつもりのJavaScriptが読めていないのが原因ではないでしょうか？

この手の調査時は、ブラウザのデバッグツール（IEならF12押下、Chromeでも同様）を使ってエラー情報を見るのが特定への近道だと思います。


CC BY-SA 3.0
2015-09-29T08:31:28.887
17054
2015-09-29T08:31:28.887
10115
17053
answer