Short description of the issue
PageFrontEdit's modal editing (double-click to open field editor) fails with a JavaScript error on any site that loads jQuery 3.x independently (e.g. via CDN for UIkit, Bootstrap, or other front-end frameworks). The bundled jQuery UI 1.10.4 is incompatible with jQuery 3.x.
Expected behavior
Double-clicking a modal-editable region (image fields, page references, etc.) should open the jQuery UI dialog with the field editor in an iframe.
Actual behavior
Nothing happens. The console shows:
Uncaught TypeError: r.getClientRects is not a function
at offset (jquery.min.js:2:85980)
at getWithinInfo (JqueryUI.js:6:14769)
at e.fn.position (JqueryUI.js:6:15042)
at _position (JqueryUI.js:7:14716)
...
at pwModalWindow
at pwModalOpenEvent
This affects all modal-based front-end editing, not just specific field types.
Root cause
jQuery UI 1.10.4's position utility calls getWithinInfo(), which defaults to $(window) when no within option is specified, then calls .offset() on it.
- In jQuery 1.x/2.x,
$(window).offset() returned undefined gracefully (no ownerDocument on window), and jQuery UI's || { top: 0, left: 0 } fallback handled it.
- In jQuery 3.x,
$.fn.offset() calls elem.getClientRects() before the ownerDocument check. Since window is not a DOM Element and has no getClientRects method, this throws a TypeError.
This is a well-documented incompatibility — jQuery UI 1.12+ is required for jQuery 3.x.
Why it only affects some sites: PageFrontEditLoad skips loading ProcessWire's bundled JqueryCore when jQuery is already present (typeof jQuery == 'undefined' test). Sites that load jQuery 3.x from a CDN satisfy this test, so JqueryCore is skipped — but JqueryUI 1.10.4 still loads on top of the incompatible jQuery 3.x.
Suggestion for a possible fix
Option A (recommended): Update the bundled jQuery UI to 1.12+ or 1.13+, which has native jQuery 3.x support.
Option B (workaround for site developers): Add a compatibility shim after the jQuery 3.x script tag:
<script>
/* jQuery 3.x / jQuery UI 1.10.x compat shim */
(function(o){jQuery.fn.offset=function(a){
if(this[0]&&this[0].getClientRects)return o.apply(this,arguments);
return a===undefined?{top:0,left:0}:this;
};})(jQuery.fn.offset);
</script>Steps to reproduce the issue
- Load jQuery 3.x in your site's
<head> (e.g. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>)
- Install and enable the PageFrontEdit module
- Add
<edit> tags or edit attributes to template output for any image or page reference field
- View the page on the front end while logged in as a superuser
- Double-click the editable region — nothing happens, console shows the
getClientRects error
Discovery
This issue was discovered while debugging a third-party module (MediaHub) whose TinyMCE plugin button was missing from PageFrontEdit inline editors. The MediaHub-specific fix is tracked separately in PeterKnightDigital/MediaHub-Issues#63. However, the jQuery UI 1.10.4 / jQuery 3.x incompatibility described here is a ProcessWire core issue that breaks all modal-based front-end editing regardless of which modules are installed.
Setup/Environment
- ProcessWire version: 3.0.229 (but affects any version shipping jQuery UI 1.10.4)
- PHP version: 8.3
- jQuery version: 3.5.1 (loaded via CDN)
- jQuery UI version: 1.10.4 (ProcessWire bundled,
wire/modules/Jquery/JqueryUI/JqueryUI.js)
- Relevant core module: PageFrontEdit
Short description of the issue
PageFrontEdit's modal editing (double-click to open field editor) fails with a JavaScript error on any site that loads jQuery 3.x independently (e.g. via CDN for UIkit, Bootstrap, or other front-end frameworks). The bundled jQuery UI 1.10.4 is incompatible with jQuery 3.x.
Expected behavior
Double-clicking a modal-editable region (image fields, page references, etc.) should open the jQuery UI dialog with the field editor in an iframe.
Actual behavior
Nothing happens. The console shows:
This affects all modal-based front-end editing, not just specific field types.
Root cause
jQuery UI 1.10.4's
positionutility callsgetWithinInfo(), which defaults to$(window)when nowithinoption is specified, then calls.offset()on it.$(window).offset()returnedundefinedgracefully (noownerDocumentonwindow), and jQuery UI's|| { top: 0, left: 0 }fallback handled it.$.fn.offset()callselem.getClientRects()before theownerDocumentcheck. Sincewindowis not a DOM Element and has nogetClientRectsmethod, this throws aTypeError.This is a well-documented incompatibility — jQuery UI 1.12+ is required for jQuery 3.x.
Why it only affects some sites:
PageFrontEditLoadskips loading ProcessWire's bundled JqueryCore when jQuery is already present (typeof jQuery == 'undefined'test). Sites that load jQuery 3.x from a CDN satisfy this test, so JqueryCore is skipped — but JqueryUI 1.10.4 still loads on top of the incompatible jQuery 3.x.Suggestion for a possible fix
Option A (recommended): Update the bundled jQuery UI to 1.12+ or 1.13+, which has native jQuery 3.x support.
Option B (workaround for site developers): Add a compatibility shim after the jQuery 3.x script tag:
Steps to reproduce the issue
<head>(e.g.<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>)<edit>tags oreditattributes to template output for any image or page reference fieldgetClientRectserrorDiscovery
This issue was discovered while debugging a third-party module (MediaHub) whose TinyMCE plugin button was missing from PageFrontEdit inline editors. The MediaHub-specific fix is tracked separately in PeterKnightDigital/MediaHub-Issues#63. However, the jQuery UI 1.10.4 / jQuery 3.x incompatibility described here is a ProcessWire core issue that breaks all modal-based front-end editing regardless of which modules are installed.
Setup/Environment
wire/modules/Jquery/JqueryUI/JqueryUI.js)