Q&A
防げるケースと防げないケース、それぞれのinput要素を見てみたいのですが、できれば、ブラウザの開発ツールで、input要素全体をコピーして貼って頂けないでしょうか。
[訂正]すみません、input要素じゃなくてa要素でした。
やろうとしたこと
Ruby on Railsでアプリを開発しています。
投稿を複数ページに分けているため、ヘッダーフッターのリンク5つに飛びたくないなと思い各リンクにname="link"を持たせ以下のコードでリンクを防ごうとしました。
application.html.erbのヘッダー、フッターに書いたリンクは以下の５つです。
1.ヘッダー左上の画像のroot_pathへのリンク
2.ヘッダーにあるユーザーへの詳細ページ
3.ヘッダーにあるログアウト
4.フッターのアプリの使い方。まだリンクは#としています。
5.フッターの外部ページへのリンク。
しかし、ログアウトとフッターのリンク2つはクリックするとリンク先に飛んでしまいます。
let elements = document.getElementsByName("link"); console.log(elements); elements.forEach(element => { element.addEventListener("click", function(e){ // リンクがクリックされたときの処理 e.preventDefault(); // 画面遷移を無効化 }, false); });
調べたこと
まずname="link"の要素は取得できているのか上記のconsole.logで取得しました。
](f6ae60460a1bbd714fe295231d64d1a1.png)
画像のように取得できていました。
次にforEachが初めの二つしかリンクを防げないのかと思い、３.以降の３つをname="link2"として別のforEach文の中身入れました。しかし結果は一緒でした。
また、1.のroot_pathへのリンクをログアウトに変更して試しましたが防げず、ログアウトしました。
わかったこと
以上のことより、このJavaScriptの文ではログアウトを防げない。
聞きたいこと
ログアウトをできなくするにはどうしたら良いでしょうか。
preventDefaultではないメソッドを使えば良いのでしょうか。
よろしくお願いします。
防げるケースと防げないケース
防げるケース
html
1①<%= link_to image_tag("kendo.png", class:"ippon-icon"), "/",name: "link" %> 2②<li class="list-top"><%= link_to "#{current_user.nickname}", user_path(current_user.id),class: "user_link",name: "link" %></li>
防げないケース
html
1③<li class="list-top"><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "logout" ,name: "link" %></li> 2 3④<li><%= link_to 'について', "#", class: "nippon_link" ,name: "link"%></li> 4 5⑤<li><%= link_to '全日本剣道連盟', "https://www.kendo.or.jp/", target: "_blank", rel: "noopener noreferrer",class: "nippon_link" ,name: "link"%></li>
です。よろしくお願いします。
皆さんのご回答を元に選択した方法
1.application.html.erbをコピーしてno_link.html.erbというファイルをlayoutディレクトリに作成しました。
2.リンクがあるボタンを消去しました。
3.no_link.html.erbを読み込みたいViewのアクションにrender layout: no_link
と書き足しました。
以上の方法で解決いたしました。ありがとうございました。
ありがとうございます。
「調べたこと」の欄に、「1.のroot_pathへのリンクをログアウトに変更して試しましたが防げず、ログアウトしました。」と書かれてますが、
これは、
1つ目のリンクの、"/" を destroy_user_session_path に変えると、ログアウトした、ってことでしょうか? それとも、他にも変えた箇所がありますか?
ありがとうございます。
その通りでございます。
他に変えた箇所はありません。
なるほど〜。興味深いですね。
私なら、"/" から destroy_user_session_path まで、ちょっとずつパスを変えながら、規則性(どんなときに防げて、どんなときに防げないのか)を探ってみるかなぁ。
あと、他のどこかでeventをlistenしてるやつが居るんじゃないかと疑ってみる。あるいは、ブラウザの開発ツールで、イベントハンドラにブレークをはってみる。または、別のブラウザに変えてみる。そんな感じで調べます。
頑張ってください。
調べていくという方法は時間がかかりそうで手っ取り早くrender layoutを利用してヘッダーとフッター自体を変更することにしました。
迅速なご回答ありがとうございました。
回答2件
0
ベストアンサー
「特定のviewではlinkしないのが固定で、画面操作でダイナミックに変わるのではない」のでしたら javascript にさせる必要があるのでしょうか？
わたしでしたら、次のどちらかで行うかな
- それらのviewは layout を変え、それが読み込むfooterなどを切り替える
- controllerにて @link_disable = true とでもして、viewにて @linl_disable をみて、(1)取り込むfooter,headerを切り替える か(2)footerなどで「link」 と 「link にみえるけど<a>じゃない」のにhtml自身を書き換える様にします。
jsに弱いってこともありますが
投稿2020/11/22 23:26
総合スコア23567
ご回答ありがとうございます。
確かにヘッダーとフッターを入れ替える発想がありませんでした。
2を試しました。
該当ページのコントローラで@link_disable=trueとしましてapplication.html.erbでリンクがあるなしの条件分岐を行いましたがうまくいきませんでした。
render layout:を使用することでうまくいきました。詳細は編集して書きます。
ありがとうございました。
0
ログアウトの文字はあるけど、クリックできないというのはUI的にあまりよくないと思っています。
個人的には、JavaScriptで複雑な処理をさせるより、該当ページでリンクを表示させない方向で検討すればよいかと思います。
①CSSで表示をコントロール
Bodyにコントローラー名とアクション名を追加しておき、該当ページではCSSで表示しないようにする
Ruby
1# application.html.erb 2<body id="<%= controller_name %>" class="<%= action_name %>">
CSS
1#action名.controller名{ 2 display:none 3}
②Rubyで表示をコントロール
下記の他に!=や、controller.action_nameなどの利用も検討する
Ruby
1<ul> 2<% # 下記のコントローラー名なら表示される %> 3<% if controller.controller_name == "*****" %> 4 <li></li> 5 <li></li> 6 <li></li> 7<% end %> 8</ul>
投稿2020/11/22 23:12
総合スコア3365
ご回答ありがとうございます。
CSSでアクション名、コントローラ名によって表示非表示をコンロトールできるのですね。参考リンクを読ませてもらいます。勉強になります。
ボタンがあるのにクリックできないのはよくないとのことでリンクを消すだけでなく非表示にすることにしました。
ありがとうございました。
あなたの回答
tips
プレビュー
