Adding StatusMessage to modal view

I have a (collection) view with a 'more' link to a form (with a button).
Pressing the button sends an email and shows a status message (and redirects to a 'more info page')

IStatusMessage(self.request).addStatusMessage( "Mail sent", "info"}

in myform.py works .

Now, I want to load the form / view in a modal overlay (pat-plone-modal).
is there a way to show a status message when using pat-plone-modal?)

1 Like

I'm also interested in the solution. Did you at the end came up on how to solve?

I can not remember what I needed this for so I am not sure if I got it to work.
I can only think about two sites that could have needed this. One is a closed intranet so I will need to dig a bit, the other is http://sykkel.asvg.no (but if it is that it looks like I did not succed (it redirects to another page).

have a look into http://plone.github.io/mockup/dev/#pattern/modal

prependContent string '.portalMessage' Selector for elements within the content provided to the modal which will be collected and inserted, by default above, the modal content. This is useful for extracting things like alerts or status messages on forms and displaying them to the user after an AJAX response.

sounds pretty much what you want.

Thanks @espenmn

In my case, I have a modal z3c.form. When there are some compilation errors the modal behave well keeping itself openened and showing inside it the portalMessage errors z3c.form returns... which is really great!

But, if the action form succeeds, the modal closes (no matter what I force to return at the end of save button action method).

The (ugly) workaround I found is to set data-pat-plone-modal='{"buttons": ""}' forcing modal to ignore all the buttons and so redirecting the user to the z3c.form standard view both in case of errors and not.

It could be a nicer workaround to keep the modal opened whatever was the z3c.form exit state (error or success). But how?

Any further help really appreciated.

alessandro.

Yep, but it only works in case of errors. Success statuses are abandoned as the modal closes itself.

How do you submit the form inside the modal?
Did you try using the "triggers" option to set eventhandlers?
I gues this way you could catch the submit and run your javascript to submit the form via ajax call.
You can also unregister events from your javascript if that is need to prevent the modal from closing.

How do you submit the form inside the modal?

The modal is a simple z3c.form (editform) rendered as modal through an anchor tagged with pat-plone-modal attribute (href has a query string parameter). So, to striclty answer, standard z3c action buttons.

I'm not a js guru, but I suppose that js modal framework is able to transform the z3c.form actions into ajax ones: I use this pat-plone-mockup almost like a "greybox".

Did you try using the "triggers" option to set eventhandlers?
I gues this way you could catch the submit and run your javascript to submit the form via ajax call.
You can also unregister events from your javascript if that is need to prevent the modal from closing.

I didn't try any of that yet... I will. Thanks!

There is no magic ajax call/transform. The modal will render your server side z3cform and if you press submit it render the whole page new and your modal is gone ;).
So i my opinion you can either go the ajex way and keep the modal open or reopen it some how after the request, not sure if thats a good idea. Why do you want to keep it open?

well ... there is. The modal has the option disableAjaxFormSubmit which defaults to false, so it catches the default submit event and uses an ajaxSubmit see here: https://github.com/plone/mockup/blob/master/mockup/patterns/modal/pattern.js#L224

Also there are two other options: redirectOnResponse and displayInModal which sound like they could do what you try to achieve '{"redirectOnResponse": false, "displayInModal": true}' or something ...

2 Likes

you made my morning... perhaps...

I wasn't aware of these options, http://plone.github.io/mockup/dev/#pattern/modal here there is no mention.

Now I'm trying redirectOnResponse:false (but is the default) and displayInModal: true (which is the default too) with no luck.

I will keep updated this post...

The mockup pinned in my plone is mockup-2.1.9

I did the trick.

I was wrong those options ARE in the official documentation but are actionOptions options actually.
So data-pat-plone-modal attribute must be populated with a json structure like this:

'{"actionOptions": {"displayInModal": true}}'

Thanks a lot.

my best,
alessandro.

yes we really need to get this updated.
The mockup website was auto generated from the code, but this does not work anymore.
So it more and more outdated :frowning:.
@thet and me where talking about this already.
We need to setup an alternative for this and probably move the docs out of the code into the docs.

To better understand the use-case and the solution Espen invited me to share some code...

Well,
in the CrudForm overriding the link method and so having rendered the link to the editform that we want to put in the pat-modal flavor

...
 def link(self, item, field):
        #...
        if field == 'scadenza': # <- the column we want to show as link
                return u'@@myeditform?uid={}'.format(item.uid)
        #...

In the CrudEditSubForm, to easly catch in the next step the span-tag inside the really modal-triggering anchor tag:

...
  def updateWidgets(self):
        super(CredTempEditSubForm, self).updateWidgets()
        w = self.widgets.get('view_scadenza')
        w.addClass('pat-plone-modal') # <- this unfortunately will go into the <span> tag of the field macro

In the page template some jquery to complete the job

(function($) {
  $(document).ready(function(){
    $amodal = $('span.pat-plone-modal').parents('a');
    $amodal.addClass('pat-plone-modal');
    var data = '{"actionOptions": {"displayInModal": true}}';
    $amodal.attr('data-pat-plone-modal', data);

[...]
})(jQuery);

In this way, Plone gives a response of this html (for each row of the z3c crud table of course):

<td class="field">
      <a href="@@myeditform?uid=foo.bar" class="noaccess" title="account disabilitato">
         <span id="crud-edit-foo-bar-widgets-view_scadenza" class="date-widget date-field pat-plone-modal">29/05/19</span>
       </a>
</td>

JQuery adds the modal behavior and options to the anchor link

<td class="field">
    <a href="@@myeditform?uid=foo.bar" class="noaccess pat-plone-modal" title="account disabilitato" 
    data-pat-plone-modal="{&quot;actionOptions&quot;: {&quot;displayInModal&quot;: true}}">
        <span id="crud-edit-foo-bar-widgets-view_scadenza" class="date-widget date-field pat-plone-modal">29/05/19</span>
    </a>
</td>

@@myeditform is rendered inside a modal pop-up; every submit is handled inside this modal through ajax calls; and every form status messages, error or succes one, is rendered inside the modal.

HTH,
alessandro