Q&A
1. 遷移後のページで必要なJSは呼び出していて、正しく読み込まれていますか？
2. HTML、CSS、JS、Bootstrap以外に、主だった技術は使用していますか？ 例えばPHPとか。
bootstrapでjsのドロップダウンを使っているのですが、ページ移動の際にうまく更新されません。
具体的には、下記コードのドロップダウンボタンをheaderに使っていて、リロードした際は普通に機能するのですが、ドロップダウン内のリンクから他のページに飛んだ際、新ページのドロップダウンのボタンが押せなくなります。
（エラーもでず、ドロップダウンのボタンはありますが、ボタンを押してもクリックできない状態です。）
そこで、もう一度リロードボタンを押してから、ドロップダウンボタンを押すと無事にドロップダウンできて、通常通り使えます。何が原因で、リンクで飛んだ直後はボタンが押せない状態になるのか、わかりません。
ちなみに、bootstrap内の他のドロップボタンでも同じような現象が起きました。
対処法がわかる方いらっしゃいましたら、ご教授お願い致します。
shared/header.html.erb
1 2<div class="header_area"> 3 <div class="lefterea"> 4 5 <div class="header-box"> 6 <h1>DOGRANsなび</h1> 7 </div> 8 9<!----> 10<div class="dropdown"> 11 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> 12 Dropdown button 13 </button> 14 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> 15 <li><%= link_to "ドッグランを登録する", "/dogruns/new" ,class: "header-link"%></li> 16 <li><%= link_to "設定ページ", user_path(current_user) ,class: "header-link"%></li> 17 <li><%= link_to "登録済みドッグランページ", users_path ,class: "header-link"%></li> 18 <li><%= link_to "登録済みコメント", "/comments/" ,class: "header-link"%></li> 19 <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete,class: "header-link"%></li> 20 </ul> 21</div> 22 23 <!--ドッグラン登録・ログアウト--> 24 <div class="header-top-ul"> 25 <div class="user_icon"> 26 <% if current_user.image.attached? %> 27 <%= image_tag current_user.image,class: 'header-user-image' %> 28 <% else %> 29 <%= image_tag 'no-image.user.png' ,class: 'header-user-image'%> 30 <% end %> 31 </div> 32 33 </div> 34 35 <!--検索--> 36 37 38 <!--ユーザー名--> 39 <div class="right_area"> 40 <% if user_signed_in? %> 41 <div class="user_info"> 42 <div class="user_name"> 43 <%= current_user.name %> 44 </div> 45 46 47 </div> 48 <% end %> 49 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> 50 </div> 51 52 </div> 53</div> 54
layoutsのコードはそれぞれcontrollerごとに分けて書いてますが、bootstrapの内容は下記と同じです。
layouts/dogrun.html.erb
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Dogrun210</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 9 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 10 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 11 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 12 </head> 13 14 <body> 15 <header> 16 <%= render "shared/header" %> 17 </header> 18 <main> 19 <p class="notice"><%= notice %></p> 20 <p class="alert"><%= alert %></p> 21 <%= yield %> 22 </main> 23 <footer> 24 <%= render "shared/footer" %> 25 </footer> 26 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> 27 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> 28 </body> 29</html> 30
あ、RoRつかってるんですね。タグで気づきました。
遷移前と遷移後でテンプレートが違っていて、JS呼び出せてないとかはないですか？
>href="#"
リンク先ページの指定がないですが、これは？
Eskeeさん、ヘッダーにこのドロップダウンのコードを入れていて、ヘッダーはrenderで別ファイルにshared/headerというように別で作っております。（_header.html.erb）
移動後のページのコードも同じヘッダーなので、テンプレートが違うことはないと思います。
m.ts10806さん、リンク先の＃ですが、こちらはbootstrapから元々コピーして来たもので、実際のコードにはリンク先追加しています。
見ている人には質問内容が全てなので、仮でも良いから入れてほしいのと、何かしら注意書きはして欲しいです。
特にコードは回答者がそれをもって再現確認することも多いので、配慮いただきたいところ。
色々ありがとうございました。以後気をつけます。質問の方を修正して、コードを追加したので、ご確認いただければありがたいです。
あなたの回答
tips
プレビュー
