Q&A前提・実現したいこと
Ruby on Railsでアプリ開発をしています。
一度、HTMLとCSSだけでフロントを作り、うまくいったので
Railsのアプリにも同じようにコードを書いたのですが、サイドバーがスライド式になりません。
サイドバーをスライドで、右からでてくるようにしたいです。
以下のエラーが確認できますが、別に原因が考えられる場合もあるかと
思いますので、何かありましたら教えてほしいです。
発生している問題・エラーメッセージ
Google ChromeのSourcesには以下の記載があります。
Uncaught SyntaxError: Unexpected identifier
以下の該当コード内の
for (var i = 0; i <script sides.length; ++i) {
sides.length; ++iに赤い波線が出ています。
該当のソースコード
erb
1<div class="sidebar right"> 2 <form id="form2" action="自分のサイトURL" method="get"> 3 <input id="sbox2" type="text" placeholder="other user name"/> 4 <button type="submit" id="sbtn2"><i class="fas fa-search"></i></button> 5 </form> 6 <table class="sidebar__search__box"> 7 <tbody> 8 <tr> 9 <td class="sidebar__search__box__name"> 10 <a href="#">ユーザーネーム</a> 11 </td> 12 </tr> 13 <tr> 14 <td class="sidebar__search__box__name"> 15 <a href="#">ユーザーネーム</a> 16 </td> 17 </tr> 18 <tr> 19 <td class="sidebar__search__box__name"> 20 <a href="#">ユーザーネーム</a> 21 </td> 22 </tr> 23 </tbody> 24 </table> 25 </div> 26<script> 27 $(document).ready(function () { 28 // 向き 29 var sides = ["right"]; 30 // サイドバーの初期化 31 for (var i = 0; i <script sides.length; ++i) { 32 var cSide = sides[i]; 33 $(".sidebar." + cSide).sidebar({side: cSide}); 34 } 35 // ボタンのクリックにより... 36 $(".btn[data-action]").on("click", function () { 37 var $this = $(this); 38 var action = $this.attr("data-action"); 39 var side = $this.attr("data-side"); 40 $(".sidebar." + side).trigger("sidebar:" + action); 41 return false; 42 }); 43 }); 44</script>
applicatin.html.erb
erb
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>TempApp</title> 5 <%= csrf_meta_tags %> 6 7 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 8 <%= javascript_include_tag 'application' %> 9 <%= javascript_include_tag 'https://kit.fontawesome.com/3b011d839e.js' %> 10 <%= javascript_include_tag 'https://code.jquery.com/jquery-1.12.3.min.js' %> 11 <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js' %> 12 </head> 13 <body> 14 <%= render 'layouts/notifications' %> 15 <%= yield %> 16 </body> 17</html>
補足情報（FW/ツールのバージョンなど）
こちらのサイトを参考にしました。
http://dblog.hrgrweb.com/jquery-sidebar
・Rails 5.0.7.2
・ruby 2.5.1p57
・postgreSQL
回答1件
0
自己解決
js
1for (var i = 0; i <script sides.length; ++i) {
script のwordがなぜか入っていました。
取り除いたところ正常に作動しました。
投稿2020/05/08 13:39
総合スコア3
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。