CODEWITHSUNDEEP
jqueryplone
Patrick Downey
Patrick Downey

Reputation: 965

plone/jquery - When a form is opened as a popup overlay, what is causing javascript to not work?

I have a dexterity content type that includes the behavior plone.app.event.dx.behaviors.IEventBasic.

In a browserview page, I have a form that opens when a link is clicked, using jquery in a javascript file in my resources folder:

jquery(function($){

   ....
   $(".openCT").prepOverlay(
         {
             subtype: 'ajax',
             filter: '#content>*',
             formselector: '#content-core > form',
             noform: 'reload',
             closeselector: '[name="form.buttons.cancel"]',
         }
     );
    ....     
});

The form opens, but anything jquery/javascript related does not work. In particular the whole_day does not work as the "time components" that show hour and minutes will not hide when whole_day is set to True. Is there something I need to include so that jquery/javascript will work in a popup overlay?

Edit: My form is a dexterity.AddForm:

class Add(dexterity.AddForm):
    grok.name('my.product.tevent')

    def updateWidgets(self):
        super(Add,self).updateWidgets()
        if 'a_param' in self.request.form.keys():

            #set default value of start date, which is a tuple built from data obtained from a_param
            self.widgets['IEventBasic.start'].value = (a_year,a_month,a_day,an_hour,a_min,a_timezone)
            #start-> hour,min are 0,0 / end -> hour, min are 23,59

Upvotes: 1

Views: 309

Answers (1)

SteveM
SteveM

Reputation: 6048

Anyone looking at this, please note that this answer is for Plone 4.3.x. Popups are handled differently in Plone 5+.

Ajax overlays are inserted into the DOM when the link or button is clicked. The new elements thus do not have any jQuery events attached to them (unless the jQuery events were added with 'live' mechanisms which reattach events every time the DOM is changed).

So, you need to re-run any JS initialization code to attach events to the new DOM elements. You can do that by adding an onLoad event to the overlay configuration:

$(".openCT").prepOverlay({
    subtype: 'ajax',
    ...
    config: {
        onLoad: function () {
            // js code to attach events to new DOM elements
    }}
...
});

This event fires after the overlay has been loaded and displayed. Thus, the new elements are available in the DOM. The items that may go in "config" are documented in the jQueryTools docs.

Upvotes: 4

Related Questions