Uncaught TypeError: Cannot read property 'fnInit' of undefined

[kntmrkm]

Hello. I'm using this gem in below env.

• Rails 4.1.4
• jQUery 1.11.1
• ajax-datatables-rails 0.2.0

when using v. '2.1.10.0.3' , It works well. but after update to 2.1.10.0.4 or 2.2.0. An error occurred.

Uncaught TypeError: Cannot read property 'fnInit' of undefined

my JS file is.

//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables/extras/dataTables.responsive

$(function() {
  init_datatables();
  init_customers_datatable();
});

init_datatables = function(){
  var responsiveHelper;
  var breakpointDefinition = {
        tablet: 1024,
        phone: 480
      };
  var defaultOption = {
    autoWidth: false,
    paginationType: 'bootstrap',
    processing : true,
    paginate: true,
    lengthChange: false,
    filter: true,
    sort: true,
    info: true,
    deferRender: true,
    stateSave: false,
    language: {
      lengthMenu: '表示件数 _MENU_ 件',
      paginate: {
        next: '次',
        previous: '前'
      },
      info: '全_TOTAL_件中 _START_〜_END_件を表示',
      search: '',
      zeroRecords: 'データが見つかりません',
      infoEmpty: 'データが見つかりません',
      infoFiltered: '(全_MAX_件より、フィルタリング)',
      processing: 'しばらくお待ちください…'
    },
    preDrawCallback: function(object) {
      if (!responsiveHelper) { //console.log(object.nTable.id);
        responsiveHelper = new ResponsiveDatatablesHelper($('#' + object.nTable.id), breakpointDefinition);
      }
    },
    rowCallback: function(nRow) {
      responsiveHelper.createExpandIcon(nRow);
    },
    drawCallback: function(oSettings) {
      init_echojs();
      init_modal_event();
      $('.dataTables_wrapper div.col-xs-6').addClass("col-sm-6");
      $('.dataTables_wrapper div.col-xs-6').removeClass("col-xs-6");
      $('.dataTables_wrapper div.dataTables_filter').addClass("from-group");
      $('.dataTables_wrapper div.dataTables_filter input').attr('placeholder', '検索');

      $('.dataTables_wrapper').removeClass("form-inline");

      responsiveHelper.respond();
    }
  };

  // Customers
  init_customers_datatable = function() {
    var options = defaultOption;
    options.serverSide = true;
    options.ajax = $('.customers-datatable').data('source');
    options.aaSorting = [[0]];
    options.aoColumns = [
      {sortable: false},
      {sortable: false},
      {sortable: false},
      {sortable: false}
    ];
    $('.customers-datatable').dataTable(options);
  };

};

What is problem?

[ricardodovalle]

@kntmrkm,

Could you post your _datatable.rb (generate by ajax_datatable_rails)?

I think this problem is because some javascript options became incompatible with the bootstrap 3 updated js file (gem v2.2.0), but I am not sure. This is the reason I changed at semantic version. Unfortunately , the error is very poorly explained by DataTables, you can found several cases.

What you can do, it is a fork and try to update DataTable.js to last version (v1.10.2) and helping to contribute, maybe this can fix it.

My usage of DataTable it is very simple compared yours, but that it is working:

//.js.coffescript
  tableElement = $('#cards_table')
  tableElement.dataTable
    ajax: $('#cards_table').data('source')
    autoWidth: false
    pagingType: 'full_numbers'
    processing: true
    serverSide: true
    sWrapper: "dataTables_wrapper form-inline"

[ricardodovalle]

Maybe there are some fix to Bootstrap DataTables plugin too. I only can take a look on next weekend because I am travelling at now. I will appreciate your help or you can use the locked version '2.1.10.0.3' Thank you very much.

[ricardodovalle]

@kntmrkm , change paginationType: 'bootstrap' to:

pagingType: 'full_numbers'

This is in the README, it is a good start.

ajax-datatable-rails use pagingType too

// users.js

jQuery(document).ready(function() {
  $('#users-table').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": $('#users-table').data('source')
    "pagingType": "full_numbers",
    // optional, if you want full pagination controls.
    // Check dataTables documentation to learn more about
    // available options.
  });
});

[kntmrkm]

Thank you for reply.

I tried paginationType: 'full_numbers'. Then it works well.

but, I don't know that "DataTable.js to last (v1.10.2)" works well. I can't try it. because I have not skill to fork. sorry (^ ^;,

I wait fix. Until fix, I can use 2.1.10.0.3.

and, This change( to full_numbers ). Layout is collapsed. so I wait fix (datatables.js?).

Thanks for great gem. Looking forward fix.

Enjoy Trip!

[ricardodovalle]

Thanks @kntmrkm, I am glad to know it worked. I think, It is a issue with jquery.dataTables.bootstrap.css.scss at your application.css. It is strange, because it isn't happening inside my project.

Are you updated with bootstrap 3.1? Could you post your application.css, only the require session?

When I have a time, i will look at DataTable main repository. Maybe it is good to wait.

[kntmrkm]

OK, I'm using bootstrap-sass-3.2.0.1.

 *= require custom       // this custom.css require bootstrap
 *= require animate
 *= require select2
 *= require select2-bootstrap
 *= require fullcalendar/fullcalendar
 *= require morris
 *= require bootstrap3-switch
 *= require dataTables/jquery.dataTables
 *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 *= require dataTables/extras/dataTables.responsive
 *= require editable/bootstrap-editable
 *= require jquery.minicolors
 *= require rails_bootstrap_forms
 *= require humane/libnotify
 *= require slidebars/slidebars
 *= require slidebars_custom
 *= require bootstrap-datepicker3
 *= require_directory ./custom/
 *= require_directory ./common/
 *= require_self

custom.css.scss

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'font-awesome';
・・・

and I require datatables.js after main content. ( require script part of "<% if yield(:script).empty? %>" below.)

<!DOCTYPE html>
<html lang="ja">
<% if yield(:head).empty? %>
  <%= render 'common/head' %>
<% else %>
  <%= yield :head %>
<% end %>
<body class="">
  ・・・・・
  <% if yield(:script).empty? %>
    <%= render 'common/script' %>
  <% else %>
    <%= yield :script %>
  <% end %>
</body>
</html>

My reply is correct? sorry my English.

[ricardodovalle]

@kntmrkm , Please try the new release (2.2.2) there are several updates. Thanks

[kntmrkm]

thanks.

but, error does not solved.

and, I tried without ajax-datatables-rails 0.2.0. but, same error occurred.

[mkhairi]

remove jquery.dataTables.css in your application.css *= require dataTables/jquery.dataTables

[kntmrkm]

@mkhairi thank you for suggestion.

but, It does not solve.

Currently css setting is

*= require custom
 *= require font-awesome
 *= require animate
 *= require select2
 *= require select2-bootstrap
 *= require fullcalendar/fullcalendar
 *= require morris
 *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 *= require editable/bootstrap-editable
 *= require jquery.minicolors
 *= require rails_bootstrap_forms
 *= require humane/libnotify
 *= require slidebars/slidebars
 *= require slidebars_custom
 *= require bootstrap-datepicker3
 *= require_directory ./custom/
 *= require_directory ./common/
 *= require_self

[kntmrkm]

Hi. It works well. I might have to check mistakes.

Today, I have updated gems. to try rails 4.2 beta1.

and, updated jquery-datatables-rails to 2.2.3 and changed like below.

pagingType: 'full_numbers',

It is Bootstrap3 style. perfect.

thank you!