Sage 9 jQuery-UI

sage
1

How do I implement jQuery UI into Sage9?

I tried to download jQuery-ui with the components I need and enqueue the scripts, project wouldn’t build.
I tried to install it through Yarn and imported the scripts in main.js and
I tried to enqueue the scripts from a CDN, multiple different ways, neither worked.
Error: “jQuery(…).draggable is not a function”.

It works fine if I put the jQuery cdn script tag in the head, which I don’t believe is best practice.

What is the best way to implement this? webpack, enqueue, cdn?

Thanks in advanced.

2

Can you show your code for some of the methods that didn’t work?

3

@MWDelaney Thanks for the reply. You’re very active on here.
I followed your instructions on Animate.css and it worked perfectly, thanks.

I followed the 3rd Party Packages instructions in the Sage docs.

I ran
$ yarn add webpack-jquery-ui

This is currently my main.js
//Import Jquery UI
import ‘jquery-ui/ui/core.js’;
import ‘jquery-ui/ui/widget.js’;
import ‘jquery-ui/ui/widgets/mouse.js’;
import ‘jquery-ui/ui/widgets/draggable.js’;
import ‘jquery-ui-touch-punch/jquery.ui.touch-punch.min.js’;

I tried to import draggable.js dependencies.

Then I ran
$ yarn run build

Console Error: Uncaught TypeError: jQuery(…).draggable is not a function

4

jQuery UI is a big dinosaur at this point. This might be worth giving a shot:

Edit: I just realized that you did give that a shot :confused:

1 Like