Plone5 Mockup Widgets, such as pat-pickadate, do not work for dynamically generated content

Question

Suppose the following piece of stupid code in a 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 good calendar entry, and the second is empty at startup. After pressing the second input, its class will be set to "pat-pickadate" - as the first, but the calendar is not displayed.

I came across this while trying to find the reason why my jquery-UI overlays displaying plone add and editing views no longer work (Plone5) see the calendar view at all.

Is this behavior expected? If so, what is the correct way to use layout widgets in forms dynamically obtained by AJAX calls in Plone 5? Is there any magic call to tell Mockup machines about a change in the DOM?

I read that Mockup has its own overlay method, but it's hard to rewrite about 600 lines of complex JS code to get a simple widget.

I could not find any documentation and examples on this topic. Can someone put me in the right direction please?

Answer 1

Templates are initialized at boot time, if your DOM changes and contains new elements that should be displayed using the template, you need to call Registry.scan .

To do this, you will need to modify your script as follows:

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

The script does not have to be inline because it does not guarantee that jQuery and / or require are already loaded. So put your code in a separate JS file and make sure it is uploaded to your page using one of two ways:

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

• declare your script directly as a compiled package 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)