Jquery UI

Name: Symfony January 2025
Start: 2025-01-16
End: 2025-01-17

The admin only comes with the Jquery UI Sortable plugin.

Adding another jQuery UI plugin

To add another jQuery UI plugin in your admin, you have to tell webpack encore to not provide another instance of jQuery thanks to the `addExternals` method:

        1
2
3
4
5
6
7
        // webpack.config.js

let Encore = require('@symfony/webpack-encore');

Encore
    .addExternals({ jquery: 'jQuery' })
    .addEntry('sonata', './assets/js/sonata.js')
    

And then adding the one you need in your own js files (don't forget to load it in your template):

        1
2
3
4
5
6
7
8
9
        // assets/js/sonata.js

import $ from 'jquery';

import 'jquery-ui/ui/widget';
import 'jquery-ui/ui/widgets/draggable';

$('.foo').draggable(); // The new UI plugin can be used.
$('.bar').sortable(); // The already loaded by sonata plugin can be used too.
    

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.

TOC

Version