PW 3.0.215 – Core updates (jQuery upgrades)

[ryan]

We've been running pretty much the same jQuery and jQuery UI versions for the last 10 years or more. I haven't really seen much urgency to upgrade because the versions we have work quite well, and I wasn't so enthusiastic about the amount of work and potential headaches the upgrade might entail. Over time there have been been a few security issues found in the jQuery library, which I've always kept an eye on, but they weren't ever things that affected our usage or caused any concern here. The biggest hangup I had was just that upgrading meant also updating a lot of code that uses jQuery, since many of the changes to the library are not compatible with code written for earlier versions. (Newer versions of jQuery have a slightly less convenient API than earlier versions). 

I place more value on stability than on having new versions of things. But it's always been in the back of my mind that sooner or later it would be nice to get these libraries upgraded for many reasons. After all, newer means better and faster right? Well, not always, but that's been the theme in jQuery at least, that newer versions of the library have some performance benefits over older versions.

For awhile now, ProcessWire has been using newer jQuery version only when $config->debug = 'dev'; and I've been testing that out for quite awhile (maybe a year?). This week we upgraded our "main" core jQuery version from 1.8.3 to the last available 1.x release 1.12.4 (4 years newer), which is the one I've been testing. We also upgraded our "dev" jQuery version from 1.12.4 to 3.6.4, which is the newest available version, released by jQuery last month (March 8, 2023). In addition, our jQuery UI "dev" version is now updated to the newest available version, 1.13.2. After awhile, these "dev" versions will become our main versions, but likely not before the next main/master version. 

While the core seemed to work fine as-is with the newer jQuery (1.12.4), the newest versions of jQuery (3.6.4) and jQuery UI (1.13.2) required quite a few JS file updates to support, and that's primarily what you'll see in the commit log this week. If you'd like to test the newest versions of these libraries in the ProcessWire admin (in a dev environment), edit your /site/config.php file and set: 

$config->debug = 'dev';

When you do that, it will also load the jQuery migrate library with logging ON. Meaning, the Javascript console will contain messages about things that need to be updated. There's still work to do in the core here, so if you enable 'dev' mode then chances are you'll see some messages about things in the admin too. 

The "dev" debug mode also makes it use the newest jQuery UI library. Keep an eye out for any visual glitches or any UI things that don't work. For instance, I found that when using the newest jQuery UI version, the image resize/crop tool wasn't working quite right, though I hope to have that figured out soon. Chances are there may be other examples like that, if using the 'dev' debug mode, so please let me know if you come across any.

If you are a module author, your module uses jQuery and you want to make sure it's working well with the new main core version (1.12.4) you can also enable jQuery migrate verbose messages in your javascript console by setting the following two in your /site/config.php:

$config->debug = true;
$config->advanced = true;

I've found that updating code for jQuery 3.6.4 seems to be backwards compatible with 1.12.4, so maybe just using the $config->debug = 'dev'; option is a good bet when testing, but I wanted to mention both options are available. I'll be continuing to update our core .js files for 3.6.4 and jQuery UI 1.13.2, and next week will likely update some of our 3rd party jQuery libraries such as the TableSorter library and others. Also, I've not forgotten about pulling InputfieldTinyMCE into the core, that'll likely be in the next version 3.0.216. Thanks for reading and have a great weekend!

[adrian]

Thanks for the hard work on this @ryan

I mentioned this in the AoS support thread as well, but I figure it's worth a mention here too in case folks can't initially figure out why their admin menu dropdowns are broken after upgrade.

If you make use of AOS's excellent "Add button to check/uncheck all checkboxes" feature, it will break the top level menu dropdowns in the PW admin (and maybe other JS).

The fix is to replace:

("[data-no-checkall-checkboxes="1"]")

with:

([data-no-checkall-checkboxes="1"])

in: /site/modules/AdminOnSteroids/scripts/aos.min.js

[adrian]

@ryan - another issue which looks like it's just core related - I can no longer view field settings (eg Setup > Fields > body) because of this error:

inputfields.js?v=33g:1049 Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
    at parseValue (inputfields.js?v=33g:1049:13)
    at inputfieldChange (inputfields.js?v=33g:1370:15)
    at setupDependencyField (inputfields.js?v=33g:1606:3)
    at HTMLLIElement.<anonymous> (inputfields.js?v=33g:1614:4)
    at Function.each (JqueryCore.js?v=1.12.4:1:4048)
    at a.fn.init.each (JqueryCore.js?v=1.12.4:1:1235)
    at HTMLFormElement.<anonymous> (inputfields.js?v=33g:1613:70)
    at Function.each (JqueryCore.js?v=1.12.4:1:4048)
    at a.fn.init.each (JqueryCore.js?v=1.12.4:1:1235)
    at InputfieldDependencies (inputfields.js?v=33g:1612:10)

Please let me know if you can't reproduce and I'll try to provide more info, but so far it's happening on all sites I've upgraded.

[matjazp]

I can confirm. I fixed it by adding 

if(typeof str == "undefined") return "";

at the top of parseValue() function in inputfields.js.

[ryan]

Thanks, I pushed the fix from matjazp

[matjazp]

I'm testing with $config->debug="dev" and there are no major issues. Thanks for the update, @ryan

I found these js files that might need some updates for the lastest jQuery (deprecations):

/wire/templates-admin/scripts/install.js
/wire/templates-admin/scripts/inputfields.js (focus)
/wire/modules/AdminTheme/AdminThemeDefault/scripts/install.js
/wire/modules/AdminTheme/AdminThemeDefault/scripts/main.js
/wire/modules/AdminTheme/AdminThemeReno/scripts/main.js
/wire/modules/System/SystemNotifications/Notifications.js
/wire/modules/Process/ProcessRole/ProcessRole.js
/wire/modules/Process/ProcessProfile/ProcessProfile.js
/wire/modules/Process/ProcessPageEditLink/ProcessPageEditLink.js
/wire/modules/Process/ProcessCommentsManager/ProcessCommentsManager.js
/wire/modules/Inputfield/InputfieldDatetime/timepicker/jquery-ui-sliderAccess.js (upgrade to 1.6.3)
/wire/modules/Inputfield/InputfieldDatetime/timepicker/jquery-ui-timepicker-addon.js (upgrade to 1.6.3)
/wire/modules/Inputfield/InputfieldPageTable/InputfieldPageTable.js
/wire/modules/Inputfield/InputfieldSelector/InputfieldSelector.js
/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js
/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js (eq)
/wire/modules/LanguageSupport/LanguageTabs.js
/wire/modules/Jquery/JqueryTableSorter/widgets.js
/wire/modules/Jquery/JqueryTableSorter/JqueryTableSorter.js (new version 2.31.3 also has issues with deprecated function calls)
/wire/modules/AdminTheme/AdminThemeUikit/layout/source/stable/plugins/jquery.layout.buttons.js

I would also update ckeditor to v4.21.0 and uikit to v3.16.14.

EDIT: Ryan, I tested with this forked version of JqueryTableSorter: https://github.com/DavidAnderson684/tablesorter and there are no deprecations in the lastest version of jQuery. I'm attaching a zip file with the files to be replaced in /wire/modules/Jquery/JqueryTableSorter/

JqueryTableSorter.zip

[adrian]

@matjazp - I am getting a little off-topic here, but I found some weird issues with UIKIT 3.16 - I should probably report them, but I was getting several FOUCs on the frontend of my site when I upgraded to it - things like menu dropdowns and modal popup that was meant to be initially hidden, so I stuck with 3.15. Did you experience any issues?

[matjazp]

I didn't test on frontend, but here in admin it works. Of course I cound't test everything, so it's quite possible that there is some odd bug in the latest version of Uikit (likely 3.16.15 in a few days).

[ryan]

@matjazp Thanks!! I will update those files and the jQuery TableSorter version to the one you linked. 

[ryan]

@matjazpOne thing that's not totally clear to me is if the jQuery focus() and blur() methods are actually deprecated? I'm probably missing something, but so far I can't find anything on the jQuery site that indicates those two are deprecated. It would make sense that they would be since many of the other shorthand methods are. 

[matjazp]

https://github.com/jquery/jquery-migrate/blob/main/warnings.md

 

Quote

 

JQMIGRATE: jQuery.fn.click() event shorthand is deprecated

Cause: The .on() and .trigger() methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.

 

 

[Fuzen]

Amazing community. ❤️

[matjazp]

Ryan, thank you for all the updates!!! It's a lot of work, if you think I could help you more, please let me know.

Here are a few more, I'm sure that's not all:

/wire/modules/Inputfield/InputfieldSelector/InputfieldSelector.js .removeAttr('disabled') -> .prop('disabled', false);
/wire/modules/InputfieldTinyMCE/plugins/pwimage.js .load(), .click()
/wire/modules/Jquery/JqueryUI/panel.js .resize()

Those listed below are from third parties; some are staled at the development. Replacing them with the new version require more testing, so I'm not sure if it's worth your time.

/wire/modules/Process/ProcessPageEditImageSelect/cropper/cropper.js .load(), .isFunction()

/wire/modules/Inputfield/InputfieldDatetime/timepicker/jquery-ui-sliderAccess.js .click()
/wire/modules/Inputfield/InputfieldDatetime/timepicker/jquery-ui-timepicker-addon.js multiple deprecations
Consider updating jQuery Timepicker Addon from v 1.6.1 to 1.6.4 with this fork: https://github.com/DanielTOsborne/jQuery-Timepicker-Addon (see attached file) 

/wire/modules/Jquery/JqueryMagnific/JqueryMagnific.js .isFunction(), .focus()
Consider upgrade to v1.1.0 (see attached file) and also check this potential security leak: https://github.com/dimsemenov/Magnific-Popup/issues/1189 

/wire/modules/Jquery/JqueryUI/vex/scripts/vex.combined.js .click(), .bind()
Latest version: https://github.com/HubSpot/vex/archive/refs/tags/v4.1.0.zip 

/wire/modules/Jquery/JqueryUI/selectize/js/standalone/selectize.js .focus()
Latest version: https://github.com/selectize/selectize.js/archive/refs/tags/v0.15.2.zip but still with deprecated methods ?

JqueryMagnific.zip timepicker.zip

[ryan]

@matjazp Thanks, I have updated all of those and others along the way. 

The only one I didn't update was Selectize because we're using what's called the "standalone" version, and I don't see it mentioned at all in the current version, so seems like there's something I'm missing and figure it's better to leave that one for now. (Especially if the new version isn't yet updated for jQuery 3.x.)

Regarding Magnific, I had a look at the mentioned security leak and I don't think it's an actual security issue, if I understand correctly. It looks like it would require someone able to manipulate the image filename to insert XSS into the actual filename. If someone can do that then the installation would already be compromised whether Magnific is there or not. 

[matjazp]

@ryan I'm attaching a standalone version for Selectize, if you decide to upgrade. Please see readme file; there are some other issues with jQuery UI and a suggested fix.

selectize.zip

[gmclelland]

Haven’t tried it yet, but it looks like there is a new fork of selectize at https://tom-select.js.org

I just saw this and thought I would report it here in case it is relevant?

[interrobang]

@ryanwill the updated jQuery and jQuery UI versions become standard in the next master? In a customer's pentest, only the outdated jQuery Ui library was criticized, but I'd rather not not enable $config->debug = 'dev' on the live site. Especially since this would not help in this case either, as the old Jquery UI version is loaded on the login page despite debug = 'dev'.