2

I am using bootstrap tables on several pages of my app (on Rails 6) and the tables load correctly.

However, I want to enable the column sorting and search feature and these only appear when I refresh the page: with fixed-table-toolbar displayed

Some of my application.js: 

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");
require("bootstrap");
require("chartkick");
require("chart.js");

import 'mapbox-gl/dist/mapbox-gl.css';
import "@fortawesome/fontawesome-free/js/all.js";
import 'bootstrap-table/dist/bootstrap-table.min.js';
import 'bootstrap-table/dist/locale/bootstrap-table-fr-FR.js';

Which is loaded in application.html.erb with <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> (I also tried to put the bootstrap-tables import in another pack file and import it separately.)

If I try to import bootstrap-table in a script at the bottom of my application.html.erb to see I will get these error messages, most likely because Jquery hasn't been loaded yet:

Uncaught TypeError: Cannot set property 'BootstrapTable' of undefined
Uncaught TypeError: Cannot set property 'BootstrapTable' of undefined
    at VM1101 bootstrap-table.min.js:10
    at VM1101 bootstrap-table.min.js:10
    at VM1101 bootstrap-table.min.js:10
(anonymous) @ bootstrap-table.min.js:10
(anonymous) @ bootstrap-table.min.js:10
(anonymous) @ bootstrap-table.min.js:10
bootstrap-table-fr-FR.js:678 
Uncaught TypeError: Cannot read property 'fn' of undefined
    at VM1103 bootstrap-table-fr-FR.js:678
    at VM1103 bootstrap-table-fr-FR.js:4

I am running out of ideas, after having moved my import files and script all around so I would be eternally grateful if someone already had the same issue and could share his/her thoughts! Thanks

Annedj
  • 108
  • 7

1 Answers1

2

I'd have to see more of your code to be sure, but I'm guessing the issue is that bootstrap-table is using some form of $(document).ready(function() { ... });, which only fires on a full page load/reload. When you navigate with Turbolinks enabled, it isn't an actual page load, and the ready event isn't fired.

You likely need to add a secondary event listener for the turbolinks:load event, which is what fires when a new page is loaded via Turbolinks. Something like:

// put this in your application.js or another file AFTER bootstrap-table
$(document).on('turbolinks:load', function() {
    $('[data-toggle="table"]').bootstrapTable();
});

See this answer for more information.

rmhunter
  • 581
  • 2
  • 9
  • Problem is exactly that and I couldn't find how to make it wait for turbolinks to load! I tried this yesterday but I must have put it in a bad place cause it kept telling me "bootstrapTable isn't a function" but today works like a charm! Thanks so much! – Annedj Jun 16 '20 at 12:07
  • So glad it helped! If it worked and you could accept the answer for others to find, I'd appreciate it. Thanks and good luck! – rmhunter Jun 16 '20 at 12:43