Q&A
TurboLinksが原因ではないかと思いますが、「tbl-select-result-row」クラスが登場するHTMLファイルはトップページですか。それともトップページから移動した先ですか。 あと、「alert('hello world')」はどのHTMLファイルでも動いていますか。
共通で使う機能なので、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を利用)
html
1 2 3 4<table class="table table-list tbl-select-result-row" > 5 <thead> 6 <tr> 7 <th>社員コード</th> 8 <th>社員名</th> 9 </tr> 10 </thead> 11 12 <tbody> 13 <tr> 14 <td>113</td> 15 <td>織田信長</td> 16 </tr> 17 </tbody> 18 <tbody> 19 <tr> 20 <td>1204</td> 21 <td>平知盛</td> 22 </tr> 23 </tbody> 24 <tbody> 25 <tr> 26 <td>22</td> 27 <td>豊臣秀吉</td> 28 </tr> 29 </tbody> 30 31 </table> 32 33<script> 34 35 $('.tbl-select-result-row td').bind('click',function(){ 36 $tag_td = $(this)[0]; 37 $tag_tr = $(this).parent()[0]; 38 alert($(this).closest('tr').children('td').eq(0).text()); 39 40 }); 41</script> 42 43
app\views\layouts\application.html.erb
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>DEMO</title> 6 7 <!--[if lt IE 9]> 8 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 9 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 10 <![endif]--> 11 <%= csrf_meta_tags %> 12 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 13 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 14 15</head> 16
アセットパイプライン側
app\assets\javascripts\application.js
javascript
1//= require jquery 2//= require jquery-ui/widgets/datepicker 3//= require jquery-ui/i18n/datepicker-ja 4//= require jquery_ujs 5//= require turbolinks 6//= require_tree . 7//= require bootstrap-sprockets 8//= require data-confirm-modal 9 10//= require common 11
app\assets\javascripts\common.js.coffee
javascript
1$('.tbl-select-result-row td').bind 'click', -> 2 $tag_td = $(this)[0] 3 $tag_tr = $(this).parent()[0] 4 alert $(this).closest('tr').children('td').eq(0).text() 5 return 6
s-show様 有難う御座います。 「tbl-select-result-row」は、TOPページ(top.html)です。はい。確認しましたが、alert('hello world')はどのhtml上でも動作します。
回答1件
0
ベストアンサー
テストプロジェクトを作って確認しましたが、原因はTurboLinksだと思います。
おそらく、$('.tbl-select-result-row td').on 'click', ->以下が実行されていないと思いますので、common.js.coffeeを以下のとおり修正してみてください。
coffeescript
1document.addEventListener 'turbolinks:load', (e) -> 2 $('.tbl-select-result-row td').on 'click', -> 3 $tag_td = $(this)[0] 4 $tag_tr = $(this).parent()[0] 5 alert $(this).closest('tr').children('td').eq(0).text() 6 return
また、common.js.coffeeを修正すれば、index.html.erbの<script>タグで囲んだスクリプト部分は削除しても大丈夫だと思います。
あと、application.jsに//=require commonと記載されていますが、//=require_tree .でassets/javascriptsフォルダにあるCoffeeScriptファイルは全て読み込まれるはずですので、//=require commonは不要だと思います。
参考
- TurboLinksについて
Rails5でTurbolinksの挙動が変わってた。 - Qiita
静的サイトをturbolinksで高速化したのでTipsを紹介する - Qiita
- //=require_treeについて
投稿2017/05/09 14:05
総合スコア203
s-show様
有難う御座います。
js→coffeejsに変換するサイトで変換したのですが、
document.addEventListener 'turbolinks:load', (e) ->
は生成してくれていませんでした・・・。
仰る通り//=require commonを削除しても動作しました。
こちらも知りませんでした・・・。
参考サイトまで有難う御座います。
今から勉強させていただきます。
本当に有難う御座いました。
js->coffee.jsに変換するサイトというのは初耳ですが、"document.addEventListener 'turbolinks:load', (e) ->"は、'turbolinks:load'というTurboLinks独自のイベントに'->'以下の関数を登録するコードですので、変換サイトで気を利かせて生成してくれることはないかと思います。そもそも、どのイベントにどんな関数を登録するかはプログラマーが任意に決めるものですので、変換サイトが生成してくれるものではないです。
（参考）
javascript EVENTの書き方使い方まとめ http://tetra-themes.com/javascript-event-235/
s-show様
なるほどです。基本的なことが分かっていませんでしたm(__)m
参考サイト、非常に分かりやすいです！
有難う御座います！
あなたの回答
tips
プレビュー
