Q&A
前提・実現したいこと
Railsをベースにwebアプリケーションを作っています。
material-dashboardを導入しており形をつくっているのですが、
ハンバーガーメニューのみ正しく作動しないので質問させてください。
発生している問題・エラーメッセージ
実際下記の画像のようなエラーが発生しております。
赤の波線の部分を見てみると.sidebarとかがあるのでハンバーガーメニューが出てこない理由がここにあるのかなと思っています。
Uncaught TypeError: Cannot read property 'outerHTML' of undefined
試したこと
エラーを見て考えられるものを試してみたのですが、
赤の波線の部分を全て削除する
画像上だと少し分かりづらいですが、material-dashboard-min.jsにおいて.outerHTML,~に赤の波線が引かれており、ここを削除してみました。
これから
a9c0b543d39f5237e22fd1f9daf21e2d.png)
.get(0)以降を削除↓
これをすると、
新たにsintaxerrorが出てはしまうのですが、ハンバーガーメニューは作動します。
一旦sintaxerrorを無視しようとしてそのまま本番環境へのデプロイを実行するとjsのエラーにより正常に完了しない状況です…
JSに関して知識不足が否めないのは承知ですが、
解決策もしくは助言いただけますと幸いです。
補足情報（FW/ツールのバージョンなど）
Rails5
ruby 2.5.1
一応applecation.js
//= require rails-ujs //= require activestorage // require turbolinks //= require jquery //= require jquery_ujs //= require jquery-ui //= require ./js/plugins/moment.min.js //= require ./js/core/popper.min.js //= require ./js/core/bootstrap-material-design.min.js //= require ./js/plugins/jquery.bootstrap-wizard.js //= require ./js/plugins/bootstrap-selectpicker.js //= require ./js/plugins/bootstrap-datetimepicker.min.js //= require ./js/plugins/bootstrap-tagsinput.js //= require ./js/plugins/jasny-bootstrap.min.js //= require ./js/plugins/bootstrap-notify.js //= require_tree . //= require autocomplete-rails
application.html.erb
<!DOCTYPE html> <html> <head> <title>Toreka</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <!--Payjp--> <script type="text/javascript" src="https://js.pay.jp/v1/"></script> <!--css,js--> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> <!--icon関連--> <link rel="apple-touch-icon" sizes="76x76" href="assets/apple-icon.png"> <%= favicon_link_tag('new_logo.png') %> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Required meta tags --> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Fonts and icons --> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> <!--スマホ対応--> <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' /> </head> <body> ~~内容は割愛~~ <!--コレ書かないといけないぽい--> <script> $(document).ready(function() { $('#datatables').DataTable({ "pagingType": "full_numbers", "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ], responsive: true, language: { search: "_INPUT_", searchPlaceholder: "Search...", } }); var table = $('#datatable').DataTable(); // Edit record table.on('click', '.edit', function() { $tr = $(this).closest('tr'); var data = table.row($tr).data(); alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.'); }); // Delete a record table.on('click', '.remove', function(e) { $tr = $(this).closest('tr'); table.row($tr).remove().draw(); e.preventDefault(); }); //Like record table.on('click', '.like', function() { alert('You clicked on Like button'); }); }); </script> <script> $(document).ready(function() { md.checkFullPageBackgroundImage(); setTimeout(function() { // after 1000 ms we add the class animated to the login/register card $('.card').removeClass('card-hidden'); }, 700); }); </script> </body> </html>
ちなみにjavascriptで読み込むもの
navber
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top text-white"> <div class="container"> <div class="navbar-wrapper"> <a class="navbar-brand" href="javascript:;">Toreka</a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation"> <span class="sr-only">Toggle navigation</span> <span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span> </button> <div class="collapse navbar-collapse justify-content-end"> <ul class="navbar-nav"> <li class="nav-item"> <a href="/" class="nav-link"> <i class="material-icons">dashboard</i> HOME </a> </li> <li class="nav-item "> <%= link_to "/mainpages/plan_comparison", class: "nav-link" do %> <i class="material-icons">public</i> プラン比較 <% end %> </li> <li class="nav-item "> <%= link_to new_user_session_path, class: "nav-link" do %> <i class="material-icons">fingerprint</i> Login <% end %> </li> <li class="nav-item "> <%= link_to new_user_registration_path, class: "nav-link" do %> <i class="material-icons">person_add</i> 無料新規登録 <% end %> </li> </ul> </div> </div> </nav>
回答1件
0
ベストアンサー
お力になれるかちょっとわからないのですが、
applecation.js
これファイルのどのあたりで読み込ませてます？
headerの辺りですか？それともfooterの辺ですか？
DOM要素よりもJSを先に読むとDOM要素が取得できずエラーを吐くことがあります。
あとは、プラグイン系はDOM要素の順番に規定があったりして、
「どういう順番でマークアップするかとか」
「どの要素に何のclassを付けるのか」
この辺りがマニュアルに書いてあると思うのですが読まれましたか？
コードが手元にあれば、jsであればエラーは解消できるんですが、
コード貼れない理由があったりしますか？
jsはプラグインで済ませてるみたいなので、CSSも恐らくデフォルトかと存じます。
せめて該当する箇所のhtmlだけでも貼っていただけませんでしょうか？
以下蛇足です。
jsが競合している可能性やバージョンの違い等でエラー吐いてる可能性もありますが、
htmlのコードが無いと検証も出来ませんので。
投稿2021/02/25 07:58
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/25 08:05
退会済みユーザー
2021/02/25 08:38
2021/02/25 09:02
退会済みユーザー
2021/02/25 09:55 編集
2021/02/25 10:42
退会済みユーザー
2021/02/25 11:51 編集
2021/02/25 12:33