We've moved discussions to Discord

Join Discord

Datatables and Stimulus

Dan Tappin •
Has anyone seen this done or is Jquery required?
NG DAVID •
I try and simply can not make datatables work in Jumpstart Pro template. 
Chris Oliver •
Datatables is a jQuery library, so you'd have to include jQuery.

I've never used Datatables, but all you should need is a working set of instructions to use it with Webpack.

Found some notes that might be helpful. https://gist.github.com/jrunestone/2fbe5d6d5e425b7c046168b6d6e74e95
NG DAVID •
I tried that, and it does not work.  In fact, I try this https://aarvy.me/blog/2019/09/21/datatables-with-bootstrap-4-minimal-setup-in-rails-6/ too and still does not work.

Further, I follow  instructions, my  clickable item list no longer work (they are working before).

//app/javasvript/packks/applications
.....
jQuery(function($) {
    $("tr[data-link]").click(function() {
          window.location = $(this).data('link');
    });
});
....


NG DAVID •
The problem is caused by the incompatible of the JQuery.  After installing the new JQuery version, datatables work great!>

Thanks for advices. 
Alex Deering •
Im using a couple jquery libraries and this is how I got jquery to work with webpack.
  1. Yarn install jquery
  2. In your app/jacascript/packs/application.js file add the following
    1. import $ from 'jquery'
  3. In your config/webpack/environment.js file make it look like this:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

Then put any other libraries you might use with jquery under the import in the application.js file
Chris Oliver •
Conway Anderson I use the following for jQuery with Bootstrap:

yarn add jquery

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
 
environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery'
}))
 
module.exports = environment

That'll make jQuery available in any of your webpack code and I can't remember if that's enough to allow you to access jQuery outside your webpack code or not.

You can add window.$ = window.jQuery = jQuery; in your app/javascript/packs/application.js file to expose it to the window or whatever if it doesn't. 

I would try it in the Javascript console to double check. Webpack just does not expose any of this outside its own modules by default.
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.