1

jPlayer オーディオ プレーヤーはローカルでは正常に動作していますが、Heroku にデプロイすると動作しなくなり、Chrome のコンソールに次のエラーが表示されます。

Uncaught TypeError: Object [object Object] has no method 'jPlayer'

私のapplication.html.erbレイアウトのjPlayerのJavascriptは次のとおりです。

  <script type="text/javascript">
  $(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
      ready: function () {
        $(this).jPlayer("setMedia", {
             mp3: "http://test.com/song.mp3",
          // m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
          // oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
        });
      },
      swfPath: "/javascriptipts",
      supplied: "mp3, m4a, oga"
    });
  });

スクリプトを組み込む方法が、Heroku の場合とは異なるように見えることに気付きました。私のローカル インスタンス (動作) の場合、含まれているスクリプトはソースで次のようになります。

   <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/calls.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jplayer.blue.monday.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/main.css?body=1" media="all" rel="stylesheet" type="text/css" />
   <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.min.js?body=1" type="text/javascript"></script>
<script src="/assets/calls.js?body=1" type="text/javascript"></script>
<script src="/assets/custom.js?body=1" type="text/javascript"></script>
<script src="/assets/google-code-prettify/prettify.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.jplayer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

jPlayer が動作していない Heroku では、ロードされたスクリプトは何らかの理由でソース内で次のようになります。

<link href="/assets/application-7d9d2071282c290d4dd4bb767188d15f.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application-679ead39cc620e8b5be4723def8305ce.js" type="text/javascript"></script>

これらを application.html.erb レイアウトに含める方法は次のとおりです。

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>

これを引き起こしている可能性のあるものと、どうすれば修正できるか、誰にも考えがありますか?

前もって感謝します！

4

1 に答える 1

1

私はこれを理解しましたが、なぜそれが起こったのか完全にはわかりません.

「assets/javascripts」から「bootstrap-popover.js」ファイルを削除する必要がありました。ローカルで次のエラーが発生していたため (上記で説明)、2-and-2 を組み合わせました。

"Uncaught TypeError: Cannot read property "Constructor" of undefined

このエラーにもかかわらず、ローカルで動作していた理由がわかりませんか? 理由を知っている人がいれば教えていただきたいです。

于 2012-11-06T17:52:24.480 に答える