Plone5 Mockup Widgets like pat-pickadate not working for dynamically generated content

Question

Assume the following silly code fragment in a plone 5 page template:

<input id="foo" class="pat-pickadate" />

<input id="bar" />

<script type="text/javascript" >
       $('#bar').click( function () {
            $('#bar').addClass("pat-pickadate");
       });
</script>

You will get two inputs. The first is a nice calendar input and the second is empty at start. After clicking the second input its class will be set to "pat-pickadate" - like the first - but no calendar is rendered.

I came across this while trying to find the reason, why my jquery-UI overlays displaying plone add, and edit views do no longer (Plone5) show calendar widgets at all.

Is this behavior intended? If so, what is the correct way to use mockup widgets in forms dynamically obtained by AJAX calls in Plone 5? Is there some magic call to inform the Mockup machinery of the DOM change?

I read that Mockup has its own overlay technique, but it is hard to rewrite some 600 lines of complex JS code just to get a simple widget right.

I was not able to find any documentation nor examples on this topic. Can anyone put me in the right direction, please?

Hallette

I've removed the answer you had edited into the question. Stack Overflow editorial practices are that answers should be posted as actual answers, not as edits to questions. Also, I strongly advise that you put the essential parts of the answer on SO and rely on a link only for extra information. Otherwise, the chance is non negligible that your answer will be badly received. – Distend

Answer 1

Patterns are initialized at load time, if your DOM changes and contains new elements supposed to be rendered using a pattern, you need to call Registry.scan.

To do it, you will need to change your script like this:

require([
    'jquery',
    'pat-registry'
], function($, Registry) {
    $('#bar').click( function () {
        $('#bar').addClass("pat-pickadate");
        Registry.scan($('#bar'));
    });
})

The script mustn't be inline, because nothing guarantees that JQuery and/or require are already loaded. So put your code in a separated JS file, and make sure it is loaded in your page using one of those 2 ways:

• put your file in your Diazo theme and add a <script> tag in your index.html (prefer this approach if you are developing a theme module)

• declare your script directly as a compiled bundle in registry.xml, see https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml (prefer this approach if you are developing an add-on module)

Exine

Thank you for the fast answer! I did change the code as suggested. This ends up in TypeError: require is not a function require([ Where do I get the reference to require from? – Hallette

Right, your JS code mustn't be inline, because nothing guarantee that JQuery and/or require are already loaded. So put your code in a separated JS file, and add it as a resource (or you can also put it in your Diazo theme and load it in your index.html). – Exine

2 ways: - put your file in your diazo theme and add <script> tag in your index.html - declare your script directly as a compiled bundle in registry.xml, see github.com/collective/example.p4p5/blob/master/src/example/p4p5/… – Exine

Thank you alot! I will try do use the second approach. – Hallette