Sage 9 jQuery-UI


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.


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


@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


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: