How to call javascript inside modal window?

Plone Support Add-on Development
,
1

Hi all,

I am not very good at Mockup development, or Javascript in general. Here I am trying to do something simple and I hope some experts here can show me some hint:

in the Plone register popup modal window, I want to put focus in the first field and populate a hidden input field with a predefined text for antispam purpose. I already have the additional hidden field added to the registration form with JS script to update the field and it works fine on the register page.

I hope I don't have to write a new pattern for such simple task. I don't know if I can extend the plone-modal pattern similar to the extending of base pattern. The "modalFunction" option in the "actionOptions" of plone-modal doesn't look like the right choice either since I still want to use all the action buttons in the form.

The test for plone-modal uses on("show.plone-modal.patterns", function(e) { ... to manipulate the content inside modal window. I am not sure how to apply it to this case.

Any help will be greatly appreciated. Thank you in advance.

Jim

2

I wish there were more docs on developing javascript for Plone. It would make the transition a bit easier than reading through codes and jquery, patternslib etc. There is a big knowledge gap between Plone / python development and javascript. Maybe it's just me, but from the lack of discussion on this topic or any javascript topics, the gap might be big for many amateur Plone developers, like me.

Anyway, the feature I want is indeed very simple to implement and I hope it can help someone.

First follow the Plone docs to add a new javascript file as a resource. Here is the js file:

require( // use require instead of define since I don't really need this to be a real pattern
['jquery', 'plone-modal'], function($, Modal) {
    'use strict';
    var myModal = Modal.extend({ // this is to extend default modal
        name: "my-modal", // has to be different than Plone default
        trigger: '.pat-plone-modal', // to be the same as default so no need to change template

        init: function () {
            this.on("shown.plone-modal.patterns", function(e) {
                // Plone modal emit 'shown' event after the modal displayed. plone.patternslib rename the event to be unique
                $("div.plone-modal-wrapper #form.widgets.fullname").focus();
                // used additional class to specify the element in the modal only.
                // You can do anything to the elements on the page including the ones within the modal window.
            }
        }
    });
    // here you can add more stuff unrelated to modal, too
});

That's it. I may remember some of the class names wrong, but you get the idea.

2 Likes