We've moved discussions to Discord

Datatables and Stimulus

Dan Tappin
Has anyone seen this done or is Jquery required?
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
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');
    });
});
....


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
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.
Dan Tappin
Has anyone seen this done or is Jquery required?
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
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');
    });
});
....


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
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.
Notifications
You’re not receiving notifications from this thread.
© 2023 Jumpstart Pro by GoRails, LLC