Jump to content

Alfred Popups not working anymore

Stefanowitsch

By Stefanowitsch,
in RockFrontend

 Share

Recommended Posts

Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted

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.

image.png.f0d517453b15fd4b50d82d3132a7ed7b.png

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
bernhard Hero Member

bernhard

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
  • Author
Posted

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
Stefanowitsch Sr. Member

Stefanowitsch

Posted
  • Author
Posted
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
bernhard Hero Member

bernhard

Posted
Posted

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

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
Go to topic listing
×
×
  • Create New...