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

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

ただいまの
回答率

90.34%

  • Ruby on Rails

    7693questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQueryプラグイン

    543questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

【Ruby on Rails】turbolinkをオフにしたらjsが動作しなくなりました

解決済

回答 1

投稿 編集

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

pecchan

score 215

お世話になっております。

あるリンク先の呼出時のみturbolinkをオフにして、jsを実行しようと試みましたが

app\assets\javascripts\common.jsまで動作しなくなりました。

具体的には、リンク先のクリックでポップアップが表示されるのが正解ですが、
別ページに移動し、戻ってきてクリックするとページの遷移になってしまいます。
画像を添付しました。

正常パターンは下図のようにjsによりポップアップウィンドウが表示されます
正常パターン

別ページに移動後、戻ってきてクリックすると、下図のようになります。
jsが動作せずただのページ遷移になっているようです。
NGパターン

呼出し元

<!-- data: { no_turbolink: true }を付けました。 -->
<%= link_to 'ポップアップのテスト', '/choice.html', class: 'iframe_box', data: { no_turbolink: true }  %>


こっちでも一緒
呼出し元

<%= link_to 'ポップアップのテスト', '/choice.html', class: 'iframe_box', data: { turbolinks: false }  %>

実行させたいjs(app\assets\javascripts\common.js)

document.addEventListener 'turbolinks:load', ->
  $('a.colorbox').colorbox()
  return


$ ->
  $('.iframe_box').colorbox
    iframe: true
    innerWidth: 600
    innerHeight: 600
  return

なぜ、common.jsが動作しなくなっているのでしょうか?

宜しくお願い致します。

2017/4/21 coffe scriptのエラー画像追加
returnを2つ記述するとエラーが出るようなのですが・・・。
イメージ説明

2017/4/21 jsの読み込ませ方追加
jsは、
app\assets\javascripts以下にcommon.js.coffeeを置いています。内容は以下になります。

document.addEventListener 'turbolinks:load', ->

$('.iframe_box').colorbox
    iframe: true
    innerWidth: 600
    innerHeight: 600
  return

  $('a.colorbox').colorbox()
  return

上記jsをapp\assets\javascripts\application.jsで
読み込んでます

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require data-confirm-modal
//= require cocoon
//= require jquery.colorbox
//= require common
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • pecchan

    2017/04/20 18:25

    わー!知りませんでした!bootstrapに合ったんですね!!せっかくなんで頑張ってcolorboxで行ってみます(;o;) 

    キャンセル

  • moke

    2017/04/20 18:37

    return一つ足りなくないですか?jsはエラーでても、普通に通るので、ブラウザの機能chromeだとディベロッパーツールとかから確認していただかないと

    キャンセル

  • moke

    2017/04/20 18:38

    あと、javascriptをrailsに読み込ませる方法が複数あるので、どのように読みこませているかを書いてください。

    キャンセル

回答 1

checkベストアンサー

+1

同一環境を設定して見ましたが、問題なく動くようです。
他のjavascriptライブラリとの競合が考えられます。
一つ一つ無効にして試すか

bootstrap modal を利用してください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/21 13:36

    moke様

    度々申し訳ないです。
    有難う御座います。

    はい。挟むようにアドバイス受けた時点で
    上記の記述も試しておりますが動作せず(ポップアップ表示されず)です。

    表示されない時に、Choromeのconsoleにも何も出力されておりません。


    キャンセル

  • 2017/04/21 13:47

    非推奨な方法なのですが
    document.addEventListener 'turbolinks:load', ->

    $(document).on 'turbolinks:load', ->
    と変えてみるとどうでしょう。

    キャンセル

  • 2017/04/21 14:01

    moke様

    有難う御座います。
    現象、Choromeともに同じでした・・・。

    キャンセル

  • 2017/04/21 14:27

    うーん、わからないですね。
    あとはfirebugを使ってjavascriptをデバッグするか...
    もしくは何か見落としているんでしょうね。
    時間のある時でよければcolorboxをいれて試してみますので、しばしお待ちを

    キャンセル

  • 2017/04/21 15:13

    moke様

    ここまでお付き合いいただき感謝してます。
    有難う御座います。

    firebugというものがあるんですね、こちらも教えていただき有難う御座います。
    頑張ってみます。

    何か分かりましたらご報告させていただきます。

    キャンセル

  • 2017/04/21 15:45

    firebugはfirefoxで使うのがオススメです。
    というか、読んで字のごとく、firefoxじゃないと使う意味がない
    ぐらいfirefoxでの機能が充実してます

    キャンセル

  • 2017/04/21 20:07 編集

    うーん、同環境を構成してやってみましたが問題なく動きました。
    そして、
    $ ->
    $('.iframe_box').colorbox
    iframe: true
    innerWidth: 600
    innerHeight: 600
    return
    でないと反応しませんね、勉強不足でした。

    こちらの同一環境だと、戻るボタンを押しても正常に動作します。

    あと気になるのは
    //= jquery_ujs
    これはrails5から非推奨になったと思います。
    もしかして競合の原因かもしれません。
    あと多分ないと思いますがdata-confirm-modalも一応無効にしてみてください。

    キャンセル

  • 2017/04/24 11:09 編集

    moke様

    有難う御座います。
    //= jquery_ujsや
    data-confirm-modal削除しましたが同じでした。

    時間的制約があり、これ以上この件の調査に時間を割くのは厳しいので
    教えていただいたbootstrap のmodalを使おうと思います。

    先ほどbootstrap のmodalに変えて動かしてますが
    画面遷移後も問題なく動作しております。
    こちらのほうが追加のgemやjsも不要でスッキリした感じです。

    有難う御座いました。

    キャンセル

  • 2017/04/24 11:18

    おお、よかったです。
    欲しい機能はbootstrapベースで探しましょう。
    大抵、いいライブラリがありますよ。

    キャンセル

  • 2017/04/24 11:36

    moke様

    そうなんですね!
    まずはbootstrapで探すようにします!
    今までは、最初にgemで探していました。

    有難う御座いました!!

    キャンセル

  • 2017/04/24 14:29

    ロジック→gem
    見た目やUI→bootstrap等のjqueryプラグイン
    と考えましょう。
    ex
    tagを実装したい(ロジック)
    gem act_as_taggleon
    タグをかっこよくつけたり外したりしたい(動き)
    bootstrap-tagsinput
    みたいな感じですね。

    キャンセル

  • 2017/04/24 15:55

    mokes様

    なるほど!
    確かにbootstrapはUI機能ですし。

    「動き」という視点ですね!
    分かりやすいご説明有難う御座います。

    今後の指針になりました!
    有難う御座います。

    キャンセル

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

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

同じタグがついた質問を見る

  • Ruby on Rails

    7693questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQueryプラグイン

    543questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。