6 Replies Latest reply: Feb 22, 2014 4:49 PM by EEG RSS

skillbuilders modal page: how to submit parent page after modal window closes

EEG Newbie
Currently Being Moderated

Hi.

 

I am using Apex 4.2.1 on Oracle 11gR3 and mod_plsql.

 

I've installed the Skillbuilders Modal Page plugin version 2.0.

 

In may app, page 7 presents a button.  When clicked, page 6 is displayed as a modal popup.  Users are able to modify form fields in this modal page and then click a submit button.  This, in turn, automatically closes the modal page.  Users are then looking at the "parent" page (page 7).  This all works fine.

 

My Problem: Page 6 (the modal page) contains an Apex collection.  This collection is updated when users click the submit button.  It is this collection that needs to be displayed with the updated data on the "parent" page (page 7).  And so, I need to automatically resubmit page 7 when the modal page automatically closes as a result of clicking the submit button on the modal page.

 

I have tried a dynamic action that does a "submit page" action whenever the submit button is clicked in the modal page.  But because the plugin uses an iframe in which to display the modal page, the actual submit page action is happening within the iframe, not in the "parent" page (page 7).  When the modal page automatically closes, users are left looking at the "parent" page (page 7) with the previous (non-updated) data.  I have to manually refresh the page (via the browser) in order to display the updated data from the collection.

 

And so, does anyone know how to automatically resubmit the "parent" page when the modal window automatically closes?

 

Thank you.

 

Elie


  • 1. Re: skillbuilders modal page: how to submit parent page after modal window closes
    Danny*D201 Journeyer
    Currently Being Moderated

    Here are something you can try on the skillbuilders modal page.

    on submit button click,do the normal process, last action is execute javascript:

    parent.$('#myreport').trigger('apexrefresh');

    parent.$(parent.document).apex_modal_page('close');

     

    #myreport is parant page's report region.

     

    I am not saying skillbuilders modal page plug in is not good.. however i write own basic modal page with far less codes needed and full control, check out window.showModalDialog (parent page) and window.returnValue (modal page).

  • 2. Re: skillbuilders modal page: how to submit parent page after modal window closes
    EEG Newbie
    Currently Being Moderated

    Hi, Danny*D201.

     

    Thanks very much for helping me.

     

    I'm not sure I understand your suggestions.

     

    Do you mean for me to create a dynamic action on the modal page (page 6 in my example) in which the "event" is to submit the page?  And use your javascript statements as the last action of this dynamic action?  Is this what you are meaning?

     

    Also, you refer to how you are creating a modal page using window.showModalDialog.  Do you have an actual example in which I can see where and how you are using your javascript statements?  This would be of tremendous help.

     

    Thank you, again.  It's much appreciated.

     

    Elie

  • 3. Re: skillbuilders modal page: how to submit parent page after modal window closes
    Tom Petrus Expert
    Currently Being Moderated

    Your requirement isn't that hard and the modal lov plugin provides ways to accomodate it.

    What it boils down to is: "when the modal page is closed I want to act on it".

     

    1/ Closing the modal dialog: you can do this several ways. The first is by defining an auto-close selector in the dynamic action which initializes the modal dialog (thus your parent page). The auto-close selector will look for the existence of the specified element(s) selector on page load of the iframe. By default a success message selector is filled out, but this may or may not work depending on your theme and page template.

    If you are showing a success message on your modal page after the page has been submitted, then you can provide the matching selector in the dialog setup DA. This is by far the easiest and most transparent way to integrate the closing, but it requires you at least know how to inspect your page template or html in order to determine the correct success message selector. Or maybe your page has no success message template, who knows. Maybe you're not setting a success message. This is setup.

    Literal copy from the documentation:

    Auto-close On Element Selector

    The Auto-close On Element Selector setting is used to specify a jQuery selector used to close the modal page automatically. The selector is executed when the modal page is loaded. If the selector selects anything, the modal page will close and the Auto Close event will be triggered. Typically this is only used for modal pages that are submitted for processing. The success message is used to auto-close the modal page.

     

    Another way is to manually close the page by calling the close function on the modal dialog instance on the parent page from within the iframe. You can find this in the documentation aswell, and Danny also posted it:

    parent.$(parent.document).apex_modal_page('close');

    However, you would probably want to close the iframe after the page has been submitted and rerendered (eg: there are after-submit validations of processes which can throw an error). The technique you could use here is to mimic the auto-close behaviour by creating a dynamic action which fires on page load, checks for a success message element, and runs the above javascript modal page close code if so.  Another way could be to explicitly set a page item with a value and on page load check that item's value and close the modal page.

    (FYI: As the documentation points out, you can also provide a modalPageCloseValue to the close action by using the javascript code.)


    2/ Act on the closing of the modal dialog: On your parent page you can create a dynamic action which acts on one of several types of closing the modal page.

    Close

    The close method can be used to close the modal dialog programmatically. The method accepts an optional parameter which can be anything. That value can then be accessed in Dynamic Actions that respond to any of the close events of the plug-in. The syntax to access the value is: this.data.modalPageCloseValue. To access the method from within the child page, see the third example.

    $(document).apex_modal_page('close');
    $(document).apex_modal_page('close', someVariable);
    parent.$(parent.document).apex_modal_page('close');

    These close events are also described in the documentation:

    Events

    Auto Close

    The Auto Close event fires when the modal dialog is closed after the page has been submitted and the Auto Close element is found in the next page that loads. When the Auto Close event fires it exposes the Auto Close element to in Dynamic Actions as this.data.$modalPageCloseObject. The $modalPageCloseObject is a jQuery object which allows a great deal of flexibility. For example, the success message captured from the modal dialog could be displayed on the parent page with the following code (or something similar):

    $('#messages')

    .hide()

    .empty()

    .append(this.data.$modalPageCloseObject)

    .slideDown('slow');

     

    Another option would be to pass a JSON string as the success message so that it could be used more programmatically by the parent page. The following example shows how this could be done. Of course it would need to be adjusted depending on your success message template (found in the page template) and the embedded JSON string.

     

    var successMessage = this.data.$modalPageCloseObject;

    var custObjText = successMessage.find('div.uMessageText').text();

    var custObj = $.parseJSON(custObjText);

    $s('PX_PARENT_PAGE_ITEM', custObj.someProp);

     

    Manual Close

    The Manual Close event fires when the the modal dialog is closed by either the end user or programmatically by the close method. If the close method was used it’s possible that an optional value was passed to the close method which is exposed in Dynamic Actions as this.data.modalPageCloseValue.

    Close

    The Close event fires whenever the modal dialog is closed, whether automatically or manually.

     

    What this means is that you could set up a dynamic action which fires on close of the modal dialog, and which reloads or submits the page.

  • 4. Re: skillbuilders modal page: how to submit parent page after modal window closes
    EEG Newbie
    Currently Being Moderated

    Hi, Tom.

     

    Thank you so much for your great detailed explanation.  I did not mark this as "Correct" yet because I've not had opportunity to try out these suggestions, though I suspect one of these will, in fact, solve my issue.

     

    My Skillbuilders Modal page is closing automatically when a success message is issued from a PLSQL process in the displayed modal page (page 6 in my example).  In this PLSQL process I use:

     

       apex_application.g_print_success_message := null;

     

    This line auto closes the modal dialogue and then my "parent" page (page 7) is no longer darkened and is now available to users for editing.

     

    And, of course, it is this "parent" page that I need to have re-submitted so that data changes made to the apex collection in the modal page are presented in the "parent".

     

    So then, are you saying that I could create a dynamic action in my "parent" page that is triggered by the Auto Close event thrown by the Modal page when it automatically closes?

     

    I did create such a dynamic action ...

     

    In my "parent" page (page 7), I created a DA:

     

    Event: Auto Close [SkillBuilders Modal Page (2.0.0)]

    Selection Type: Button

    Button: P7_BUTTON_NAME

    Condition: No Condition

     

    In the "Actions" Section:

    Action: Submit Page

    Fire When Event Result Is: True

    Fire On Page Load: Not Checked

    Show Processing: No

     

    Un-fortunately, this DA does not work.  My modal page closes automatically alright.  But the "parent" page does not re-submit.

     

    What am I missing?

     

    No doubt I'm not totally understanding what I need to do.

     

    Please help.

     

    Thank you.

     

    Elie


  • 5. Re: skillbuilders modal page: how to submit parent page after modal window closes
    Tom Petrus Expert
    Currently Being Moderated

    Your auto-close dynamic action hasn't been defined properly. The action is not fired on a specific element but rather on the "document". Your selection type should be "DOM element" and the element should be "document".

     

    (Note that if you use multiple modal pages on one page, this action will fire for each of them. You can use the "modal page id" in the modal page creation DAs to be able to distinguish between them in the close actions. You can find this in the documentation, too.)

  • 6. Re: skillbuilders modal page: how to submit parent page after modal window closes
    EEG Newbie
    Currently Being Moderated

    Hi, Tom.

     

    Thank you very much for correcting me here.

     

    It turns out that, while waiting for more responses in this Forum, I researched on the web and found this really excellent article written by Christoph Ruepprich in which he takes people step-by-step in setting up the SkillBuilders Modal page (version 2.0): from opening it to closing it to refreshing the parent page (which is, of course, what I specifically need). How to make use of the close events exposed by the plugin.  In addition, he shows how to do all this both from a standalone button as well as from clicking a link in a classical report.  The article includes several screenshots that makes it so easy to follow and learn from.  Very nice indeed.

     

    What he says in the article is quite similar to what you have said in your responses.

     

    Here's the link.  Hopefully it will help others as well as myself.

     

       http://ruepprich.wordpress.com/2013/07/11/skillbuilders-modal-page-instructions/

     

    Thanks, again for your help.

     

    Elie

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points