Rails7 ImportMaps

Rails7 ImportMaps

rphiliprphilip Posts: 5Questions: 1Answers: 0

I followed the very useful discussion in this question and dataTables is working well :) . This is how I have setup the file where dataTables is imported:

import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

import DataTable from "datatables.net-bs5"
import Buttons from 'datatables.net-buttons-bs5'
import 'jszip'
import 'pdfmake'
 
window.DataTable = DataTable();
Buttons();

However, I still cannot get the datatables.net-buttons-bs5 plugin to work. It seems like I must have something wrong with the syntax because although dataTables itself recognizes that jQuery is available, for some reason Buttons does not and the browser reports these errors:

Uncaught ReferenceError: jQuery is not defined
    at dataTables.buttons.min.js:5:283
    at dataTables.buttons.min.js:5:308
Uncaught ReferenceError: jQuery is not defined
    at buttons.bootstrap5.min.js:5:379
    at buttons.bootstrap5.min.js:5:404

Any suggestions would be so very, very greatly appreciated.

Answers

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    My apologies, the error message re. JQuery is not defined were due to an error in another file. Those messages are gone now, but the buttons are still not being rendered in the table. I understand that having a test case would be the best way to debug this, but if there is anything obviously wrong with my syntax of the import statements or calling the Buttons() initialization, it would be great. Otherwise, I'll try to build a stripped down testcase.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Try:

    Buttons(window, jquery);
    

    That might resolve it. If it doesn't can you show me how you are initialising the DataTable. Then if there is nothing wrong with that, I'd need a test case.

    Thanks,
    Allan

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    Thanks Allan! Unfortunately, the buttons are still not rendered. Here's how I initialize the DataTable:

    $('#sensor_networks').DataTable({
      searchHighlight: true,
      paging:          false,
      buttons: [
        { extend: 'copy',
          text: 'Copy to Clipboard'
        },
        { extend: 'csv',
          text: 'Download Spreadsheet (csv)'
        }
      ]
    });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    You either need to:

    1. Use the dom option to have the Buttons display, as shown in this example, or
    2. Append the Buttons container to the document, which can be one of the easiest ways to work with the styling integration - e.g. as shown in this Bootstrap 5 example.

    Allan

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    Thank you, again! Unfortunately, the buttons are still not being rendered when I initialize with:

    $(document).on('turbo:load', function(e) {
      var sensor_networks_table = $('#sensor_networks').DataTable({
    
        searchHighlight: true,
        paging:          false,
        buttons: [
          { extend: 'copy',
            text: 'Copy to Clipboard'
          },
          { extend: 'csv',
            text: 'Download Spreadsheet (csv)'
          }
        ]
      });
    
      sensor_networks_table.buttons().container().appendTo( '#sensor_networks_wrapper .col-md-6:eq(0)' );
    
    });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you give me a link to your page so I can take a look and see what is going wrong?

    Thanks,
    Allan

  • rphiliprphilip Posts: 5Questions: 1Answers: 0

    Working! Thank you Allan!
    Here's what we had to do to get DataTables with Plugins working on Rails7.0.4 using import maps (this repository has a working rails 7 example)

    # config/importmap.rb
    # Default, created by rails new.
    pin "application", preload: true
    pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
    pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
    pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
    pin_all_from "app/javascript/controllers", under: "controllers"
    
    # Bootstrap (and popper, used for bootstrap popups and popovers)
    pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.esm.js"
    pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js" 
    
    # DataTables, Buttons Plugin, and jQuery
    pin "datatables.net"              , to: "https://cdn.datatables.net/1.13.1/js/jquery.dataTables.mjs"
    pin "datatables.net-bs5"          , to: "https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.mjs"
    pin "datatables.net-buttons"      , to: "https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.mjs"
    pin "datatables.net-buttons-bs5"  , to: "https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap5.mjs"
    pin "datatables.net-buttons-html5", to: "https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.mjs"
    pin "pdfmake"                     , to: "https://ga.jspm.io/npm:pdfmake@0.2.6/build/pdfmake.js"
    pin "pdfmake-fonts"               , to: "https://ga.jspm.io/npm:pdfmake@0.2.6/build/vfs_fonts.js"
    pin "jquery"                      , to: "https://ga.jspm.io/npm:jquery@3.6.1/dist/jquery.js"
    
    # Support libraries for DataTables/Plugins
    pin "jszip", to: "https://ga.jspm.io/npm:jszip@3.10.1/lib/index.js"
    pin "buffer", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/buffer.js"
    pin "core-util-is", to: "https://ga.jspm.io/npm:core-util-is@1.0.3/lib/util.js"
    pin "events", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/events.js"
    pin "immediate", to: "https://ga.jspm.io/npm:immediate@3.0.6/lib/browser.js"
    pin "inherits", to: "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js"
    pin "isarray", to: "https://ga.jspm.io/npm:isarray@1.0.0/index.js"
    pin "lie", to: "https://ga.jspm.io/npm:lie@3.3.0/lib/browser.js"
    pin "pako", to: "https://ga.jspm.io/npm:pako@1.0.11/index.js"
    pin "process", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/process-production.js"
    pin "process-nextick-args", to: "https://ga.jspm.io/npm:process-nextick-args@2.0.1/index.js"
    pin "readable-stream", to: "https://ga.jspm.io/npm:readable-stream@2.3.7/readable-browser.js"
    pin "readable-stream/lib/internal/streams/stream.js", to: "https://ga.jspm.io/npm:readable-stream@2.3.7/lib/internal/streams/stream-browser.js"
    pin "safe-buffer", to: "https://ga.jspm.io/npm:safe-buffer@5.1.2/index.js"
    pin "setimmediate", to: "https://ga.jspm.io/npm:setimmediate@1.0.5/setImmediate.js"
    pin "string_decoder", to: "https://ga.jspm.io/npm:string_decoder@1.1.1/lib/string_decoder.js"
    pin "util", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/util.js"
    pin "util-deprecate", to: "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js"
    
    # To pickup my custom javascript files
    pin_all_from "app/javascript/custom", under: "custom"
    
    # Gemfile
    source 'https://rubygems.org'
    git_source(:github) { |repo| 'https://github.com/#{repo}.git' }
    
    ruby '2.7.4'
    gem 'rails', '~> 7.0.4'
    ...
    # Use Sass to process CSS
    gem 'sassc-rails'
    
    #Use Bootstrap gem to pickup CSS
    gem 'bootstrap'    , '~> 5.2.2'   # https://blog.eq8.eu/til/how-to-use-bootstrap-5-in-rails-7.html
    ...
    
    
    // app/assets/stylesheets/apllication.scss (note the .SCSS instead of .CSS file type)
    @import "bootstrap";
    
    // app/javascript/application.js
    import "@hotwired/turbo-rails"
    import "controllers"
    
    import "bootstrap"
    import "custom/init_datatables"
    
    // app/javascript/custom/init_datatables.js
    import $ from 'jquery'
    import DataTable from 'datatables.net-bs5'
    import 'datatables.net-buttons-bs5'
    import 'datatables.net-buttons-html5'
    import 'jquery-highlight'
    import JSZip from 'jszip'
    import pdfMake from 'pdfmake'
    import pdfFonts from 'pdfmake-fonts'
    
    DataTable.Buttons.jszip(JSZip)
    DataTable.Buttons.pdfMake(pdfMake)
    pdfMake.vfs = pdfFonts.pdfMake.vfs
    
    $(document).on('turbo:load', function(e) {
    
      var my_table = $('#my_table').DataTable({
        destroy: true,
        paging:          false,
        buttons: [
          { extend: 'copy',
            text: 'Copy to Clipboard'
          },
          { extend: 'csv',
            text: 'Download Spreadsheet (csv)'
          }
        ]
      });
    
      my_table.buttons().container().appendTo( '#my_table_wrapper .col-md-6:eq(0)' );
    });
    
  • Alex53Alex53 Posts: 13Questions: 4Answers: 0
    edited November 2023

    Hi.
    I try this repository https://github.com/rossatboulder/rails7_datatables_example and it work.
    But when I add the plugin yadcf it doesn't work.
    init_datatables.js

    import yadcf from "yadcf"
    

    When I try

    "initComplete": function() {
             yadcf.init(sensor_networks_table, [
                      { column_number: 8, filter_default_label: "Test"},
             ]);
    },
    

    Error:
    Uncaught TypeError: yadcf.init is not a function

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    YADCF is not supported by us I'm afraid - it is third party software. You'd need to ask the author if it supports ESM loading.

    Allan

  • Alex53Alex53 Posts: 13Questions: 4Answers: 0

    Allan, thanks. I read about SearchPanes, this works for me.

  • Alex53Alex53 Posts: 13Questions: 4Answers: 0

    Hi.
    I again try this repository https://github.com/rossatboulder/rails7_datatables_example and it work.
    But when I add Editor, error
    dataTables.editor-4f659a37df65b51caad5240bac45cd2f7c1ca2dd44629e560725ac83c7d3f9de.js:46 Uncaught ReferenceError: jQuery is not defined

    Editor in local folder, import:
    import 'editor/dataTables.editor'
    This my importmap

    <script type="importmap" data-turbo-track="reload">{
      "imports": {
        "application": "/assets/application-d06dba057add25eb68192fb5015ef6347598e48e3d037bb8a4c21ba750ec33da.js",
        "@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
        "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
        "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
        "bootstrap": "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.esm.js",
        "@popperjs/core": "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js",
        "datatables.net": "https://ga.jspm.io/npm:datatables.net@1.13.3/js/jquery.dataTables.mjs",
        "datatables.net-bs5": "https://ga.jspm.io/npm:datatables.net-bs5@1.13.3/js/dataTables.bootstrap5.mjs",
        "datatables.net-buttons": "https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.mjs",
        "datatables.net-buttons-bs5": "https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap5.mjs",
        "datatables.net-buttons-html5": "https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.mjs",
        "datatables.languageRU": "https://cdn.datatables.net/plug-ins/1.13.7/i18n/ru.mjs",
        "pdfmake": "https://ga.jspm.io/npm:pdfmake@0.2.6/build/pdfmake.js",
        "pdfmake-fonts": "https://ga.jspm.io/npm:pdfmake@0.2.6/build/vfs_fonts.js",
        "jquery": "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js",
        "jquery-highlight": "https://ga.jspm.io/npm:jquery-highlight@3.5.0/jquery.highlight.js",
        "jszip": "https://ga.jspm.io/npm:jszip@3.10.1/lib/index.js",
        "buffer": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/buffer.js",
        "core-util-is": "https://ga.jspm.io/npm:core-util-is@1.0.3/lib/util.js",
        "events": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/events.js",
        "immediate": "https://ga.jspm.io/npm:immediate@3.0.6/lib/browser.js",
        "inherits": "https://ga.jspm.io/npm:inherits@2.0.4/inherits_browser.js",
        "isarray": "https://ga.jspm.io/npm:isarray@1.0.0/index.js",
        "lie": "https://ga.jspm.io/npm:lie@3.3.0/lib/browser.js",
        "pako": "https://ga.jspm.io/npm:pako@1.0.11/index.js",
        "process": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/process-production.js",
        "process-nextick-args": "https://ga.jspm.io/npm:process-nextick-args@2.0.1/index.js",
        "readable-stream": "https://ga.jspm.io/npm:readable-stream@2.3.7/readable-browser.js",
        "readable-stream/lib/internal/streams/stream.js": "https://ga.jspm.io/npm:readable-stream@2.3.7/lib/internal/streams/stream-browser.js",
        "safe-buffer": "https://ga.jspm.io/npm:safe-buffer@5.1.2/index.js",
        "setimmediate": "https://ga.jspm.io/npm:setimmediate@1.0.5/setImmediate.js",
        "string_decoder": "https://ga.jspm.io/npm:string_decoder@1.1.1/lib/string_decoder.js",
        "util": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.27/nodelibs/browser/util.js",
        "util-deprecate": "https://ga.jspm.io/npm:util-deprecate@1.0.2/browser.js",
        "moment": "https://ga.jspm.io/npm:moment@2.29.4/moment.js",
        "datatables.net-searchpanes-bs5": "https://ga.jspm.io/npm:datatables.net-searchpanes-bs5@2.1.1/js/searchPanes.bootstrap5.mjs",
        "import": "https://ga.jspm.io/npm:import@0.0.6/index.js",
        "datatables.net-searchpanes": "https://ga.jspm.io/npm:datatables.net-searchpanes@2.1.1/js/dataTables.searchPanes.mjs",
        "fs": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/fs.js",
        "path": "https://ga.jspm.io/npm:@jspm/core@2.0.1/nodelibs/browser/path.js",
        "datatables.net-select": "https://ga.jspm.io/npm:datatables.net-select@1.6.1/js/dataTables.select.mjs",
        "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
        "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
        "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
        "custom/init_bootstrap_popovers": "/assets/custom/init_bootstrap_popovers-abf9515d48d08c529ef7eb8cc8e4d84b112482899bdda4aae47a87bbe421a43e.js",
        "custom/init_datatables": "/assets/custom/init_datatables-13df71a1bad052bab7d092805a8355990ca70a20a2053e05c596af381acb7a27.js",
        "custom/init_editor": "/assets/custom/init_editor-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
        "editor/dataTables.editor": "/assets/editor/dataTables.editor-4f659a37df65b51caad5240bac45cd2f7c1ca2dd44629e560725ac83c7d3f9de.js",
        "editor/editor.bootstrap": "/assets/editor/editor.bootstrap-0804849e8858e0c88a090a151e90d5730d9e6c028f4d67ba0deb043a214c6a90.js",
        "editor/editor.bootstrap4": "/assets/editor/editor.bootstrap4-625451031c3492fd89135dd5e0c2fdca0aa8e2d0fd0d6cab4130e4e40f88309d.js",
        "editor/editor.bootstrap5": "/assets/editor/editor.bootstrap5-98f55cb4f960d74edffda8c2a5727291382d40e2b776e3ff9d71c8728c12649d.js",
        "editor/editor.bulma": "/assets/editor/editor.bulma-eb5ff1da6a98aa65da37d6d963ab0f8f6cc7a837fe7869b95388d6a2abe7397c.js",
        "editor/editor.dataTables": "/assets/editor/editor.dataTables-069545f6348f4021352487df752161e7981ba22ddb706ee45da03478c78ed188.js",
        "editor/editor.foundation": "/assets/editor/editor.foundation-b8a541aef32bb635d73a2da5c32a2feef6bd0057cfcda6ad8f3c3f4becfbf5ed.js",
        "editor/editor.jqueryui": "/assets/editor/editor.jqueryui-95e51aa1ebc062958e9f657e416fc0c80fd6ee05a0512b14908f1544e6f415c4.js",
        "editor/editor.semanticui": "/assets/editor/editor.semanticui-910a0ce8c3fdb54712e61cebed19c87797faa0c23b94975f2b98a91e63a84991.js"
      }
    }</script>
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    You should probably be using the Editor .mjs files rather than the UMD loader in the .js file.

    Allan

  • Alex53Alex53 Posts: 13Questions: 4Answers: 0

    Allan, thanks.
    One more problem was I can't load mjs files (only js) in Rails importmaps. But I simply rename mjs to js and code work fine.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    mjs is the accepted extension for Javascript modules (Node docs). I'd be surprised if an importer as common as Rails can't use mjs - although I haven't used it myself, so I don't know. Maybe as on SO or some other Rails support forum?

    At the moment, I don't plan to change the extension of the DataTables module files I'm afraid. The .js files for our distributions are UMD loaders (AMD, CommonJS and browser).

    Allan

Sign In or Register to comment.