質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

【Ruby on Rails】アセットパイプラインのスクリプトが動作しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 724

pecchan

score 268

共通で使う機能なので、app\assets\javascripts\common.js.coffeeにまとめたいのですが、そちらに置くと動作しません。
※application.jsの中に//= require commonを追加しました。

jsを直接htmlのbody上に記述すると動作します。

jsがやってることは、テーブル行をクリックすると、
セルの値をalert表示するだけです。

単純な動作ですが、なぜアセットパイプラインだと動作しないのでしょうか?

試しにcommon.js.coffeeに
alert('hello world')追加すると動作したので、
アセットパイプライン自体は動作しているようです。

宜しくお願い致します。

html側 
index.html.erb(application.html.erbを利用)

<table class="table table-list tbl-select-result-row" >
    <thead>
        <tr>
            <th>社員コード</th>
            <th>社員名</th>
        </tr>
    </thead>

  <tbody>
      <tr>
        <td>113</td>
        <td>織田信長</td>
      </tr>
  </tbody>
  <tbody>
      <tr>
        <td>1204</td>
        <td>平知盛</td>
      </tr>
  </tbody>
  <tbody>
      <tr>
        <td>22</td>
        <td>豊臣秀吉</td>
      </tr>
  </tbody>

    </table>

<script>

    $('.tbl-select-result-row td').bind('click',function(){
        $tag_td = $(this)[0];
        $tag_tr = $(this).parent()[0];
        alert($(this).closest('tr').children('td').eq(0).text());

    });
</script>

app\views\layouts\application.html.erb

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DEMO</title>

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

アセットパイプライン側

app\assets\javascripts\application.js

//= require jquery
//= require jquery-ui/widgets/datepicker
//= require jquery-ui/i18n/datepicker-ja
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require data-confirm-modal

//= require common

app\assets\javascripts\common.js.coffee

$('.tbl-select-result-row td').bind 'click', ->
  $tag_td = $(this)[0]
  $tag_tr = $(this).parent()[0]
  alert $(this).closest('tr').children('td').eq(0).text()
  return
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s-show

    2017/05/05 22:51

    TurboLinksが原因ではないかと思いますが、「tbl-select-result-row」クラスが登場するHTMLファイルはトップページですか。それともトップページから移動した先ですか。 あと、「alert('hello world')」はどのHTMLファイルでも動いていますか。

    キャンセル

  • pecchan

    2017/05/06 12:35

    s-show様 有難う御座います。 「tbl-select-result-row」は、TOPページ(top.html)です。はい。確認しましたが、alert('hello world')はどのhtml上でも動作します。

    キャンセル

回答 1

checkベストアンサー

+1

テストプロジェクトを作って確認しましたが、原因はTurboLinksだと思います。
おそらく、$('.tbl-select-result-row td').on 'click', ->以下が実行されていないと思いますので、common.js.coffeeを以下のとおり修正してみてください。

document.addEventListener 'turbolinks:load', (e) ->
  $('.tbl-select-result-row td').on 'click', ->
    $tag_td = $(this)[0]
    $tag_tr = $(this).parent()[0]
    alert $(this).closest('tr').children('td').eq(0).text()
    return


また、common.js.coffeeを修正すれば、index.html.erb<script>タグで囲んだスクリプト部分は削除しても大丈夫だと思います。

あと、application.js//=require commonと記載されていますが、//=require_tree .assets/javascriptsフォルダにあるCoffeeScriptファイルは全て読み込まれるはずですので、//=require commonは不要だと思います。


参考

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/10 09:05

    s-show様

    有難う御座います。

    js→coffeejsに変換するサイトで変換したのですが、
    document.addEventListener 'turbolinks:load', (e) ->
    は生成してくれていませんでした・・・。

    仰る通り//=require commonを削除しても動作しました。
    こちらも知りませんでした・・・。

    参考サイトまで有難う御座います。
    今から勉強させていただきます。

    本当に有難う御座いました。

    キャンセル

  • 2017/05/11 22:27

    js->coffee.jsに変換するサイトというのは初耳ですが、"document.addEventListener 'turbolinks:load', (e) ->"は、'turbolinks:load'というTurboLinks独自のイベントに'->'以下の関数を登録するコードですので、変換サイトで気を利かせて生成してくれることはないかと思います。そもそも、どのイベントにどんな関数を登録するかはプログラマーが任意に決めるものですので、変換サイトが生成してくれるものではないです。
    (参考)
    javascript EVENTの書き方使い方まとめ http://tetra-themes.com/javascript-event-235/

    キャンセル

  • 2017/05/12 10:12

    s-show様

    なるほどです。基本的なことが分かっていませんでしたm(__)m
    参考サイト、非常に分かりやすいです!
    有難う御座います!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる