Plone5 Mockup Widgets就像pat-pickadate不适用于动态生成的内容

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?

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)