Jump to content

PW 3.0.215 – Core updates (jQuery upgrades)


ryan
 Share

Recommended Posts

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!

  • Like 18
  • Thanks 5
Link to comment
Share on other sites

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

  • Like 10
Link to comment
Share on other sites

@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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...