質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

datetablesがうまく表示されない”時がある”

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 585
退会済みユーザー

退会済みユーザー

rails5 ruby2.5.1

困っていること

datetablesを利用してtableに検索フォームなどを導入しました。
しかし、表示される時とされない時があります。

表示される場合
イメージ説明

表示されない場合
イメージ説明

基本は表示され、検索フォームも機能します。しかしページを移動して戻ってくるとdatetablesが表示されなくなります。
※「更新」をすれば再度表示されます。

検証にてconsoleの確認

datetablesが表示されない場合
イメージ説明

jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819 jQuery.Deferred exception: Cannot read property 'defaults' of undefined TypeError: Cannot read property 'defaults' of undefined
    at HTMLDocument.<anonymous> (<anonymous>:3:27)
    at mightThrow (http://192.168.33.15:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535:29)
    at process (http://192.168.33.15:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603:12) undefined

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at HTMLDocument.<anonymous> (<anonymous>:3:27)
    at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535)
    at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603)

datetablesが正常に表示される場合はエラーはありません。

該当ソースコード

application.css

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .
//= require js/lightbox
//= require bootstrap-sprockets
//= require data-confirm-modal


application.js

 *= require_self
 *= require font-awesome
 *= require 'css/lightbox'
 *= require_tree .
 */
@import "bootstrap";


index.html.erb

<% provide(:title,"みんなの質問") %>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script>
jQuery(function($){
 $.extend( $.fn.dataTable.defaults, {
 language: {
 url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
 } 
 }); 
$('#table1').DataTable({
"paging": "true",
"pageLength": 15,
"lengthMenu": [ [15, 30, 50,-1], [15, 30, 50, "全件"]],
"order": [[ 1, "desc" ]] ,
"columnDefs": [{ "orderable": false, "targets": 3 }]
, dom:"<'row'<'row'<'col-sm-12'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-12'p>>"
});
});
</script>
<h2 class="index-main">みんなの質問</h2>
<hr>
<table id="table1" class="table table-striped table-bordered table-hover table-clickable">
 <thead class="test1">
  <tr>
    <th>No</th>
    <th>作成日</th> 
    <th>質問タイトル</th>
    <th>質問内容</th>
  </tr>
  </thead>
<tbody>
    <% @entries.each do |entry| %>
      <% if entry.room.present? %>
        <tr data-href="/rooms/<%= entry.room_id %>">
          <td><%= entry.room_id %></td>
          <td><%= entry.created_at.strftime('%Y年%m月%d日 %H:%M') %></td>
          <td>Q.<%= entry.room.name %></a></td>
          <td><%= entry.room.explain %></td>
        </tr>
      <% end %>
    <% end %>
  </tbody>
</table>
<script>
 $(function(){
   $('tr[data-href]', 'table.table-clickable').on('click', function(){
     location.href = $(this).data('href');
   });
 });
</script>
<div class="index-end">
 <%= link_to "戻る", user_path(current_user), class:"btn btn-info" %>
</div>

まとめ

gem 'jquery-datatables-rails'という便利なものありますが、今回はgemを使用せずに作成を行っています。
application.jsやapplication.cssの順番を入れ替えてみましたが解消されませんでした。
もう一度検証エラーの内容をよく読んでみようと思いますが、何が分かれば教えて頂きたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る