ProcessWire
ProcessWire copied to clipboard
Front-End Editing Broken — jQuery 3.1
As per title, the front-end editing modal box is broken when I'm using jQuery version 3.10.
Javascript error given: Uncaught TypeError: f.getClientRects is not a function Appearance: http://imgur.com/6OJfcDI
Edit: Downgrading to 2.2.4 fixes this
If you need jQuery 3.x, have you tried the migrate plugin: http://code.jquery.com/jquery-migrate-3.0.0.js
I think the error you are getting is due to jqueryui not yet being compatible with jquery 3.x
https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
While most things will work, there are a few issues that jQuery UI and jQuery Mobile will be addressing in upcoming releases. If you find an issue, keep in mind that it may already be addressed upstream and using the jQuery Migrate 3.0 plugin should fix it. Expect releases soon.
Not sure that this really should be closed - I think it's a good reminder that jQueryUI needs updating when a new version that supports jQuery 3.x is made available. And to be honest I haven't checked that this is definitely the issue.
I don't think there's anything we can do about this at present since we rely on jQuery UI for this. But it sounds like longer term we should consider not using jQuery UI at all for this purpose, and perhaps add-in our own tiny modal window library to handle the front-end editor case.
If UI is the problem with jQuery 3.1 then UI has been updated to 1.12.1. Might be worth having a quick look.
Just for the record: I haven't actually tested it, but based on the package.json file I would assume that jQuery UI now supports jQuery 3.x.
"dependencies": {
"jquery": ">=1.7.0 <4.0.0"
},
But it sounds like longer term we should consider not using jQuery UI at all for this purpose, and perhaps add-in our own tiny modal window library to handle the front-end editor case.
Definitely agreed. I think it's a bit much to require jQuery just to open a simple modal window. Definitely a good use case for either one of the smaller modal libraries, or some custom JS :)