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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3387閲覧

Railsで特定の画面遷移時にjQueryが効かない

hisataka

総合スコア19

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/10/23 16:58

同じページでもどこから遷移してきたかによってjQueryが効いてくれない時があります。

以下が問題の部分のコードです。

js側

app/assets/javascript/application.js //= require tether //= require jquery //= require jquery_ujs //= require bootstrap //= require turbolinks //= require_tree . //= require bootstrap-tagsinput.min $(function(){ $('#slide').click(function(){ if ($('#target').css('display') == 'none') { $('#target').slideDown('normal'); } else { $('#target').slideUp('normal'); } }); });

View側

app/views/users/show.html.erb ・ ・ ・ <div id="target"> <div class="row"> <p>aaaの機能が追加されました</p> </div> </div> ・ ・ ・

css

app/assets/stylesheets/custom.scss ・ ・ ・ #target { width: 100%; height: 250px; color: #000000; overflow: auto; display: none; .notification-first-row { width: 100%; height: 20px; padding: 0; margin: 0; border-bottom: solid rgb(147,147,147); border-width: 0.2px; margin-left: 10px; } .row { border-bottom: solid rgb(147,147,147); border-width: 0.2px; margin-top: 20px; margin-left: 10px; .notification-text{ display: inline-block; } } } ・ ・ ・

問題の画面は以下のようになります。
赤線の部分は最初は表示されておらず、お知らせをクリックした時に正しい挙動ではスライドダウンして赤線の部分が現れるのですが、この画面への遷移のやり方がいくつかあり、特定の画面遷移をした時はお知らせをクリックしても何も動作しません。

イメージ説明

以下が挙動が正常な時と異常な時の状況になります。

---挙動が正常な時---
・別のページから遷移した時
Rails

<%= link_to @creator.users[0].nickname, {:controller => "users", :action => "show", :id => @creator.users[0].id}, :method => :get %>

実際に生成されるHTML

<a data-method="get" href="/users/6">test3434nm7</a>

で遷移した時。
・リロードした時。
・URLを直接入力して遷移した時。

---挙動が異常な時---
・headerにこのページへのリンクがあり、そのリンクから遷移してきた場合。
Rails

<%= link_to "Profile", current_user, { :class => "dropdown-item" } %>

実際に生成されるHTML

<a class="dropdown-item" href="/users/6">Profile</a>

以上になります。ちなみにChromeを使っているのですが、異常な挙動の時はファビコンのところに表示されるリロードマークが表示されません。あまり詳しくないので憶測ですが、リロードするかキャッシュを使うかの問題で、キャッシュを使う時はjQueryがうまく読み込まれないということなのでしょうか?

他に必要な情報があったら言っていただければと思います。よろしくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ふつうのリンク遷移もメソッドはGETです。

おそらく、Turbolinksが邪魔をしているパターンではないかと思います。Turbolinksはページ遷移を速くするために、JavaScriptでページ内の<body>だけ置き換えるという手法を取っています。

特に必要ないなら、無効化してしまうのが手っ取り早いです。

投稿2016/10/24 00:41

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hisataka

2016/10/24 15:29

コメントありがとうございます。jQuery関連で何かしら問題が起きていそうだなとは思っていましたが、Turbolinksがそのような処理をしているのですね。とても参考になりました、ありがとうございました!!
guest

0

自己解決

質問文にあった以下の文を

<%= link_to "Profile", current_user, { :class => "dropdown-item" } %>
<%= link_to "Profile", current_user, { :class => "dropdown-item", :method => :get } %>

に直す。
getに直すことで、parameterにauthentication tokenが渡されるようになりました。また、ロードアイコンもファビコンのところに表示されるようになりました。authentication tokenとgetメソッドどっちが原因なのか知りたい…

投稿2016/10/23 17:13

hisataka

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問