Stefanowitsch Posted November 17 Share Posted November 17 Hi @bernhard I updated a (not so old) project and I am using the following versions of modules - ProcessWire 3.0229 - RockFrontend 3.23.3 - RockPageBuilder 5.5.4 When loading a page in the frontend (when logged in) this error message is appears in the console: jquery-3.3.1.min.js?m=1531755686:2 Uncaught TypeError: Cannot read properties of undefined (reading 'dialog') at HTMLDocument.<anonymous> (<anonymous>:1:10079) at l (jquery-3.3.1.min.js?m=1531755686:2:29375) at c (jquery-3.3.1.min.js?m=1531755686:2:29677) When I want to open an alfred editor modal window via the "edit block" button, the modal window does not open. Instead I am redirected to the backend edit mask of the block page and this error pops up in the console: jquery-3.3.1.min.js?m=1531755686:2 Uncaught TypeError: r.getClientRects is not a function at w.fn.init.offset (/site/templates/scripts/jquery-3.3.1.min.js?m=1531755686:2:83688) at Object.getWithinInfo (/wire/modules/Jquery/JqueryUI/JqueryUI.js:6:14769) at e.fn.position (/wire/modules/Jquery/JqueryUI/JqueryUI.js:6:15042) at e.<computed>.<computed>._position (/wire/modules/Jquery/JqueryUI/JqueryUI.js:7:14716) at e.<computed>.<computed>.<anonymous> (/wire/modules/Jquery/JqueryUI/JqueryUI.js:6:5029) at e.<computed>.<computed>._position (/wire/modules/Jquery/JqueryUI/JqueryUI.js:6:5029) at e.<computed>.<computed>.open (/wire/modules/Jquery/JqueryUI/JqueryUI.js:7:6534) at e.<computed>.<computed>.<anonymous> (/wire/modules/Jquery/JqueryUI/JqueryUI.js:6:5029) at e.<computed>.<computed>.open (/wire/modules/Jquery/JqueryUI/JqueryUI.js:6:5029) at e.<computed>.<computed>._init (/wire/modules/Jquery/JqueryUI/JqueryUI.js:7:5169) This project uses by default jQuery 3.3.1. – I tried different jQuery versions but this error is always shown. Updating the jQueryUI version did not help either. In fact - what did help - was removing jQuery at all 🙂 but this is no solution of course. I am loading my scripts like this within the <head> markup: <? $scripts = $rockfrontend->scripts() ->add($config->urls->templates . 'scripts/jquery-3.3.1.min.js', "defer") ->add($config->urls->templates . 'scripts/lazysizes/lazysizes.min.js', "defer") ->add($config->urls->templates . 'scripts/aos/aos.js', "defer") ->add($config->urls->templates . 'scripts/bootstrap/util.js', "defer") ->add($config->urls->templates . 'scripts/bootstrap/carousel.js', "defer") ->add($config->urls->templates . 'scripts/bootstrap/collapse.js', "defer") ->add($config->urls->templates . 'scripts/owlcarousel/owl.carousel.min.js', "defer") ->add($config->urls->templates . 'scripts/lightbox/lightbox.js', "defer") ->add($config->urls->templates . 'scripts/main.js', "defer") ->minify(!$config->debug); ?> My question is: Does jQuery somehow collide with any of the sripts used to make the frontend editing and popups work? In all my newer projects I don't use jQuery at all so this never bothered me. This is one of my "legacy" websites however. Link to comment Share on other sites More sharing options...
bernhard Posted November 17 Share Posted November 17 Hi @Stefanowitsch ALFRED uses PW's frontend editing which uses jQuery for the modals. I'd love to have a better solution, but that's what we have. Can you try to disable loading of jQuery in Alfred.js and see if that maybe fixes your issue and maybe it works with the version that you load on your frontend? Then I could add a setting to not load Alfred in the frontend if the frontend already uses jQuery. Also try to use the same version of jQuery that the backend uses. 1 Link to comment Share on other sites More sharing options...
Stefanowitsch Posted November 17 Author Share Posted November 17 Yes the problem seems to be related to the jQuery version I am adding manually in the header vs. the JqueryCore Version that is loaded in the PageFrontEdit.module file. The Alfred.js itself does not load any jQuery files (it just checks if there are any available). This is the solution that seems to work: 1. Load JqueryCore.js instead of any jQuery Version in the first place (do not use the 'defer' attribute here) ->add('/wire/modules/Jquery/JqueryCore/JqueryCore.js') 2. Disable the loading of JqueryCore.js in the PageFrontEdit.module on line 801: //'file' => $config->urls('JqueryCore') . ($config->debug === 'dev' ? 'dev/' : '') . 'JqueryCore.js', Link to comment Share on other sites More sharing options...
bernhard Posted November 17 Share Posted November 17 So it's something that Ryan would have to add as an option to the frontend editing module? Link to comment Share on other sites More sharing options...
Stefanowitsch Posted November 17 Author Share Posted November 17 1 hour ago, bernhard said: So it's something that Ryan would have to add as an option to the frontend editing module? I think this is a kind of special case. I don't know if all project that involve frontend editing (in combination with modal windows) do suffer from the same behaviour. Link to comment Share on other sites More sharing options...
bernhard Posted November 17 Share Posted November 17 I think it will, but I don't know. So please either create an issue for ProcessWire to ping ryan about that or just mark this topic solved 🙂 One day I'll have to rebuild the frontend and backend of RPB to use the same tech and then this issue will also be fixed.. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now