Q&A
困っているのはわかるのですが、具体的に何が「動かない」のかを書きましょう。jsfile.js に記述した内容が実行されないという意味でしょうか。
ソースコードはコードブロックを使って記述してください。
https://teratail.com/help/question-tips#questionTips3-5-1
タブによるページの切り替えをjsで行いたいのですが、
うまく動きません。このようなメッセージが出ています。
you are loading Turbolinks from a <script> element inside the <body> element. This is probably not what you meant to do!
Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change
翻訳
代わりに、アプリケーションのJavaScriptバンドルを<head>要素内にロードします。 <body>の<script>要素は、ページが変更されるたびに評価されます
コード
show.html.erb
<div id="mypage"> <ul id="tabsgroup"> <a class ="activetab" title ="asaguide" href ="#/asaguide">AS A GUIDE</a> <a class ="notactivetab" title ="asaguest" href ="#/asaguest">AS A GUEST</a> </ul> <div id ="content"> <section id= "asaguide"> </section> <section id= "asaguest"> </section> </div> **jsfile.js** $(document).on ('turbolinks:load', function() { $("#content div").hide(); // Initially hide all content $("#tabsgroup li:first").attr("id","current"); // Activate first tab $("#content div:first").fadeIn(); // Show first tab content $('#mypage a').click(function(e) { e.preventDefault(); $("#content div").hide(); //Hide all content $("#tabsgroup li").attr("id",""); //Reset id's $(this).parent().attr("#id","current"); // Activate this $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab }); })();
application.html.erb
<head> <meta charset="utf-8"> <meta name ="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag "jsfile.js" %> </head> <tbody> <div class ="wrap"> <% if user_signed_in? %> <header> <tr> <% if @g_infos.present? %> <% @g_infos.each do |g_info| %> <div class = "dropdown-header"> <ul class ="responsive-menu"><i class="fas fa-bars"></i></ul> <div class ="dropdown-content-header"> <td><%= link_to 'Mypage', g_info_path(g_info.id) %></td> <a href="#">Chat</a> <td><%= link_to 'News', news_path(g_info.id) %></td> <td><%= link_to 'Q&A', questions_path %></td> <td><%= link_to "LOGOUT", logout_path %></td> </div> </div> <ul class ="logo"><a href="/g_infos">JAPA<span>N</span>IGHT</a></ul> <ul class ="header-username"><%= g_info.name %></ul> <ul class ="mypagecommand"><%= link_to 'Mypage', g_info_path(g_info.id) %></ul> <ul ul class ="mypagecommand"><a href="#">Chat</a></ul> <ul class ="mypagecommand"><%= link_to 'News', news_path(g_info.id) %></ul> <ul class ="mypagecommand"><%= link_to 'Q&A', questions_path %></ul> <ul class ="mypagecommand"><%= link_to "LOGOUT", logout_path %></ul> <% end %> <% end %> </tr> </header> <% end %> <% if current_user == nil %> <header> <tr> <div class = "dropdown-header"> <ul class ="responsive-menu"><i class="fas fa-bars"></i></ul> <div class ="dropdown-content-header"> <%= link_to 'SIGNUP' ,new_guide_path %> <a href="#">LOGIN</a> </div> </div> <ul class ="logo"><a href="/g_infos">JAPA<span>N</span>IGHT</a></ul> <ul class ="login"><%= link_to 'LOGIN', login_path %></ul> </tr> </header> <% end %> <%= yield %> <footer> <ul class ="logo"><a href="">JAPA<span>N</span>IGHT</a></ul> <img src = "/assets/town.png" class ="town-ill"></img> <wrapper class ="footer-wrapper"> <ul class ="footer-list"><a href ="">HELP</a></ul> <ul class ="footer-list"><a href ="">CONTACT</a></ul> <ul class ="footer-list"><%= link_to 'COMPANY', outline_info_company_path %></ul> <ul class ="footer-list"><a href ="">OUR PHILOSOPHY</a></ul> <ul class ="footer-list"><a href ="">TERMS OF USE</a></ul> <ul class ="footer-list"><a href ="">SPECIAL COMMERCIAL CODE</a></ul> <ul class ="footer-list"><a href ="">PRIVACY POLICY</a></ul> </wrapper> </footer> </div> </tbody> <%= javascript_include_tag "http://code.jquery.com/jquery-2.2.3.min.js" %> <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" %> <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" %> <%= javascript_include_tag "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" %> <%= javascript_include_tag "http://code.jquery.com/jquery-1.8.1.min.js" %> </html>
ちなみに、英語のエラーメッセージの内容は理解しましたか？
タイトルは要件のみ記載してください。
このタイトルでは何も要件が含まれていません。
https://teratail.com/help/question-tips#questionTips3-1
ありがとうございます。jsfile.js に記述した内容が実行されないという意味です。メッセージの意味はよくわかりません。turblinkでjsのロードが実行されていないようです。
質問は編集できますので適宜ご対応ください。
>メッセージの意味はよくわかりません
Google翻訳と言うのがあるので。
翻訳はしてましたが、意味がわかりませんでした。翻訳文載せておきます。https://qiita.com/hirocueki2/items/4f3ff07015fa3edb139a
この記事が近いように思いましたが、解決できませんでした。
読むのは赤の他人であるため、書いてある内容以上のことは誰もくみ取れません。
調べたこと試したことはなるべくたくさん書いてあったほうが的確なアドバイスにもつながります。
あとは、エラーメッセージがどこでどのように出ているか（どこで確認したものか）ですね。
追記：
Rubyわかる人はわかるのであればそれはそれで良いのですがJavaScriptが主題である以上、やはりどこでどう確認された現象なのかは気になります。操作手順とかですね。
Rubyコンパイル時のエラーならJavaScriptの話ではなくなりますし。
エラーはChromeの検証画面のconsoleに表示されております。
仰るようにrubyの方のjsの読み込み方の問題かもしれません。
application.html.erb ですが、これ全部ではないですね。
エラーが inside the <body> element. と言っていますから、<body>部も判るように、全文載せて下さい
ありがとうございます。bodyも載せました。
回答1件
0
ベストアンサー
<head> </head> <tbody> <header> </header> <%= yield %> <footer> </footer> </tbody> <%= javascript_include_tag ..... </html>
という構造になっています。<body>がないですが、エラーメッセージには<body>とありますから</head>の後を<body>部と判断してくれているようです。
ですので、一番下にある <%= javascript_include_tag がbodyにあると解釈されています。
<% if user_signed_in? %>
などによる場合分けは止めて、 sign_in などのための layout を別に作り、 そのcontrollerに
layout 'そのlayoutの名前'
と宣言して、別のlayoutを使うほうが見通しが良くなります。
投稿2019/08/10 08:30
総合スコア23347
あなたの回答
tips
プレビュー
