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

霸气de小男生 提交于 2019-12-10 13:23:07

问题


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?


回答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)



来源:https://stackoverflow.com/questions/35688167/plone5-mockup-widgets-like-pat-pickadate-not-working-for-dynamically-generated-c

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!