Javascript error due to obsolete jQuery version - upgrade to last jQuery v1.x release?

[Toutouwai]

Short description of the issue

If you have this valid jQuery code in the PW admin...

var $button = $('<button>Hello</button>').attr('type', 'button');

...then you get this JavaScript error:

This is just an example to make a general point about the kind of errors that can be caused by the PW core using a version of jQuery (v1.8.3) that dates back to 2012. And you can't necessarily code around this kind of bug because you might want to use a jQuery plugin in the PW admin that isn't expecting to be running with a ten-year-old version of jQuery.

@ryancramerdesign, is there a policy/plan around when libraries that are bundled with the core get upgraded?

Could we at least upgrade to the last jQuery v1.x release? @matjazpotocnik reported in 2017 that he switched the core jQuery to v1.12.1 and didn't experience problems: https://processwire.com/talk/topic/17806-old-jquery/?do=findComment&comment=156381

Setup/Environment

• ProcessWire version: 3.0.206

[ryancramerdesign]

@Toutouwai

The dev version of jQuery we were using was 1.11.1, I have just updated it to 1.12.4, which seems to be the most recent version of jQuery 1.x available. To use it set $config->debug = 'dev'; in your /site/config.php file. This also enables jQuery migrate, which provides console.log() hints about what needs updating, whenever it finds something. An example: I tried your code snippet and it told me that IE 6/7/8 don't support changing the type attribute, which is probably why jQuery 1.8 had the option disabled. Btw, wouldn't you want to use prop rather than attr to change the type?

[adrianbj]

@ryancramerdesign - just an FYI that if I enable $config->debug = 'dev'; on a site then the top level menus in the admin no longer show their dropdowns. This is the case with 1.11.1 and the 1.12.4. These only work on 1.8.3 which is still the default unless you are in dev mode.

[ryancramerdesign]

@adrianbj I'm running with config.debug=dev but the dropdowns work fine here (AdminThemeUikit). Are you seeing any errors or notifications in your JS console?

[adrianbj]

[adrianbj]

And yes, Uikit theme

[adrianbj]

Sorry, looks like it's Admin On Steroids related :(

[teppokoivula]

This may have been explained before, but why the separate dev version of jQuery? Is there a reason why we couldn't just include the latest 1.x version as the default?

Assuming, of course, that we can't move on to jQuery 2.x or 3.x.

To be honest I very rarely touch jQuery these days (in my opinion it's become obsolete, so the only time I do reach to it is if some third party code I really need depends on it), so I'm quite out of touch with it, but I can't remember having too much trouble moving between 1.x versions before. Especially when combined with jQuery Migrate.

[matjazpotocnik]

I'm testing with $config->debug="dev", but without jQuery Migrate, and there are some issues that are easy to fix in the core. Ryan, if you plan to fix those issues, then let me know, and I can prepare the list of fixes, if not, then jQuery Migrate will work. Below are some of the fixes:

Uncaught Error: Syntax error, unrecognized expression: tr[data-id=]
    at Sizzle.error (JqueryCore.js?v=1.12.4:1502:8)
    at Sizzle.tokenize (JqueryCore.js?v=1.12.4:2159:11)
    at Function.Sizzle [as find] (JqueryCore.js?v=1.12.4:872:15)
    at jQuery.fn.init.find (JqueryCore.js?v=1.12.4:2826:11)
    at HTMLDivElement.<anonymous> (InputfieldPageTable.js?v=14-1668770490:29:16)
    at s (JqueryUI.js?v=1668770490:7:70396)
    at HTMLDivElement.complete (JqueryUI.js?v=1668770490:7:77312)
    at opt.complete (JqueryCore.js?v=1.12.4:7900:12)
    at fire (JqueryCore.js?v=1.12.4:3232:31)
    at Object.fireWith [as resolveWith] (JqueryCore.js?v=1.12.4:3362:7)

It's this line: $table.find("tr[data-id=" + deleteID + "]") in InputfieldPageTable.js when deleteID is an empty string.

jquerylongclick needs an update: jquerylongclick.zip

In /wire/templates-admin/scripts/main.js, line 313, 'hover' pseudo-event is deprecated, we should use 'mouseenter mouseleave'.

etc, etc...

My concern is user modules. There is some deprecated code so I guess jQuery Migrate will be needed if we go with updated jQuery in the core.

[teppokoivula]

My concern is user modules. There is some deprecated code so I guess jQuery Migrate will be needed if we go with updated jQuery in the core.

This is the approach that WordPress took when they moved from jQuery 1.x to 3.x. In this regard PW and WP are/were in a similar situation, and considering their user base I'm tempted to say that if it worked for them, it should work for us as well.

Since the jQuery version bundled with core and enabled by default is very old, there's currently little incentive for module authors to update their code so that it would work on later versions. Additionally it appears that front-end editing does not work properly with recent versions of jQuery, so in a way the core could actually be holding developers back.

[Toutouwai]

Btw, wouldn't you want to use prop rather than attr to change the type?

It's not my code (I just stripped it back to make a minimal demo case) - it's from jQuery Datatables: https://github.com/DataTables/Dist-DataTables-SearchBuilder/blob/73103108382647a9124f53baa155c5ee98b70a54/js/dataTables.searchBuilder.js#L126

[ryancramerdesign]

Ryan, if you plan to fix those issues, then let me know, and I can prepare the list of fixes, if not, then jQuery Migrate will work. Below are some of the fixes:

Thanks, yes I would like to update where needed so that jQuery migrate isn't necessary for the core at least. But may need to leave it for external modules, for some time at least. I added the $config->debug='dev' option in order to not just use a newer jQuery, but also to track down and fix everything that jQuery migrate finds, and was updating things for awhile for that. But seem to have been distracted by other thing and forgot for a bit, so this thread is a good reminder to get back to it.

[ryancramerdesign]

@matjazpotocnik I have added the updates you mentioned, thanks.

[matjazpotocnik]

I'm testing with the latest version of jQuery 3.6.1 and jQueryUI 1.13.2 as I think this is the direction we should pursue. I found these issues:

/wire/modules/JqueryUI/modal.js is throwing errors. I have fixed them in the attached zip file. The changes are minor, please search for the string "//MP" to see them. Changes are compatible with jQuery 1.8.3 (current version), 1.12.4 (dev), and 3.6.1 and jQueryUI 1.10.4 (current version) and 1.13.2, so it's safe to apply changes.

3.6.1 chokes on .onload() event that needs to be changed with .on('load') in /wire/modules/Inputfiled/InputfieldAsmSelect/asmselect/jquery.asmselect.js /wire/modules/Inputfield/InputfieldPageTable/InputfieldPageTable.js

modal.zip