Skillbuilder Modal Page Close

Gurus like Dan McGhan, etal.,
I am trying to use Skillbuilder's Modal Page to display a report of outstanding requisition when someone wants to create a new requisition. The condition of the modal page is EXISTS (select 'X' from requisition where requester_emp_id = :APPL_req_emp_id. It displays fine. I want the modal page to close and link to the page with the key when the use clicks on the edit icon (which I gave class "edit-click") to view/update an existing requisition or the NEW button (to create a new requisition) on top of the report. How do I do that. I reviewed the documentation and viewed the demo (a few times) and haven't had much success.
Robert
http://apexjscss.blogspot.com
Edited by: sect55 on Aug 3, 2012 7:07 PM

I made some changes:
Page 11:
Your manual close dynamic action:
You were almost there. You set the value of P11_ID to the returned value, which is good, but not enough. Queries in reports work with the session state, but the value of an item in the document is not session state. You need this item to be submitted to session state.
<ul>
<li>I removed all the refreshes. A refresh only works on reports, it does not on items!</li>
<li>I added a true action which submits the page. Since P11_ID now has a value, it will submit this to the session state. The page reloads, and the row fetch process will fetch the values for your primary key (P11_ID) now. Since the modal has a condition which checks whether P11_ID is empty no modal will popup.</li>
</ul>
Page 7:
Manual close dynamic action. Wrong!
window.parent.$(window.parent.document).apex_modal_page('close','#ID#');You can't use #ID# in a dynamic action like that. You need to fetch a value from the DOM somewhere, which is why i used the HREF attribute as a makeshift container for this on the column link.
parent.$(parent.document).apex_modal_page('close', $(this).attr('href'));This will take the ID value stored in href from the triggering element, ie, the elements with .edit-click as a class, ie the column links.
So i set the column link back to Target: URL, and URL to #ID#
For the create button:
you simply close the modal. This would trigger a manual close aswell. In this case the modal just needs to close. However, with my earlier change which submits...
I changed the dynamic action on P11 for the manual close to just run javascript code:
var lReturn = this.data.modalPageCloseValue;
if(lReturn){ //there is a return value
   if(lReturn=='CREATE'){
      //no submits, just close dialog
   }else{
      //an ID is returned. Set P11_ID and submit the page
      $s('P11_ID',  this.data.modalPageCloseValue);
      apex.submit();
};Due to JS errors in IE8 i can't (at least from here. And there is too much going on, and i hate F12 >:() . See if it works or if you can figure it out from here.

Similar Messages

  • Skillbuilder Modal Page: Popup to close on session time out

    Hi All,
    I implemented skillbuilder modal page plug-in in my application.
    When a session expires, the Popup window remains open and in the same popup window current page gets redirected to login page.
    I want popup window to close so that users can login into the main (parent) window and then open the popup windows again.
    Please give your expert advice on this.
    Thanks and regards,
    Abhishek

    Please help me out in this.

  • Skillbuilder Modal Page needs to execute a process on the parent page

    Hi,
    I am using apex 4.1 and theme 2. Also I am using the Skillbuilder modal page plugin.
    I have a modal page with a textbox and a button. On click of this button i want to pass the textbox value to the parent page and execute a process on the parent page.
    I dont want to hardcode the page numbers here as this same popup page will be used in all the pages in the application. It is to capture the comments before submit on each page. Hence it should just pass the values to the page that called this modal window.
    Any help greatly appreciated.
    Thanks in advance,
    DS

    Take a look at these:
    {thread:id=2420256}
    {thread:id=2407235}
    Basically: define a dynamic action on your parent page to act on the close event of the modal page. On your modal page, use the close method of the plugin (and possibly provide a return value)
    From documentation
    Advanced Usage
    Methods
    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');
    Events
    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.

  • Pass value from report on skillbuilder modal page

    I am using the skillbuilder modal dialog. I have a report that displays in the modal. I want to pass a value from the report back to the page that called the modal and then close the modal. I have tried several different things, but I have not been successful. Any ideas?

    Not sure if you have completely read the instructions.pdf that comes with the plugin. The "Events" section (Auto Close event) under "Advanced Usage" in the pdf may help you.
    Anyways, I have not tried this solution.

  • Skillbuilder modal page 2.0 causes a javascript error in APEX 4.2

    After installing the Skillbuilder's modal page 2.0 plugin in APEX 4.2, the following javascript error is shown.
    Line: 194
    Error: Object doesn't support this property or method
    Using IE8 debugger the following code seems to be at fault.
    function(){apex.jQuery(document).apex_modal_page({
       "transition":"fade",
       "draggable":true,
       "initialHeight":100,
       "initialWidth":300,
       "overlayOpacity":.5,
       "scrolling":true,
       "loadingImageSrc":""
    (function(){apex.da.initDaEventList();})();
    (function(){apex.da.init();})();
    The modal page work flawlessly in APEX 4.1.
    Any help will be greatly appreciated.
    Thank you,
    Del

    Check your popup page. You probably have an after-processing branch defined which will redirect to your original page. That is not necessarily bad, although i usually set it to redirect to the same page when using a popup. What will probably not work for you is the success message selector. If you defined "#success-message" as the auto-close selector, this means that the plugin will look for an element on the page in the popup for an element which matches this selector.
    - What did you define for auto-close selector
    - And on the page you redirect to after-processing of the form, how is the success message defined there
    If (IF) you have set #success-message as the auto-close selector, and the popup is not closing, then this would mean that the popup message on the page does not match this selector!

  • Close button on skillbuilder modal page

    All,
    I want to create another button to close my skill builder modal popup page. Ive the default close(X) working well but i want to have another close button at the bottom of the page so one at the top and another at the bottom of the page, i tried different javascript but not working..Any help on this please regards.

    it finally worked.

  • Error while opening modal (skillbuilder plugin)  page on page load

    Hi all,
    I'm using 4.2.1. ( on 11GR2 ), theme 25.
    Skillbuilder Modal page plugin v2
    Modal pages are working great, on all kinds of events, but if I try to open one via a D.A. on page load it fails with "Uncaught TypeError: Object load has no method 'stopImmediatePropagation' " error (in the browser console).
    <edit>
    just found that this error is caused by the "cancel event" DA action which should be fired after the open modal dialog action. If I ommit this cancel event the modal page is not loaded but also no error is shown.
    </edit>
    Any ideas on how to fix this? In the end I just want to open a modal window after the page is loaded depending on the value of an item set when loading the page ( the branch sets an item value to indicate that the modal window should be opend ).
    Regards
    Bas
    Edited by: Bas de Klerk on 11-apr-2013 7:43

    Narrowed it down to change in behaviour between APEX 4.1 and APEX 4.2
    Page source for both versions is alsmost similar, besides the different APEX js libraries being loaded, so probably the source of the problem is somehow in there.
    Apex 4.1 generates code below :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
    <head>
      <title>sdfsdfsf</title>
    <link rel="stylesheet" href="/i/css/apex_4_1.min.css" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_4_1.css" type="text/css" /><![endif]-->
    <link rel="stylesheet" href="/i/libraries/jquery-ui/1.8.14/themes/base/jquery-ui.min.css" type="text/css" />
    <script type="text/javascript">var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;</script><script src="/i/javascript/apex_4_1.min.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0.css" type="text/css" />
      <!--[if IE]><link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0_ie.css" type="text/css" /><![endif]-->
      <!--[if IE 6]><link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0_ie6.css" type="text/css" /><![endif]-->
      <!--[if IE 7]><link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0_ie7.css" type="text/css" /><![endif]-->
    </head>
    <body >
    <!--[if lte IE 6]><div id="outdated-browser">You are using an outdated web browser. For a list of supported browsers, please reference the Oracle Application Express Installation Guide.</div><![endif]-->
    <form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm">
    <input type="hidden" name="p_flow_id" value="101" id="pFlowId" /><input type="hidden" name="p_flow_step_id" value="3" id="pFlowStepId" /><input type="hidden" name="p_instance" value="3963167387744880" id="pInstance" /><input type="hidden" name="p_page_submission_id" value="1130499891713056" id="pPageSubmissionId" /><input type="hidden" name="p_request" value="" id="pRequest" />
    <div id="header">
      <div id="app-logo"><a href="f?p=101:1:3963167387744880"><span style="font-family:Arial; color:green; font-size:18; white-space:nowrap; font-weight:bold;">SoMStudie v1.06 - Productie</span></a></div>
      <div id="navbar">
        <div class="navbar-entry"><a href="javascript:{if (confirm('Applicatie uitloggen ? Niet opgeslagen wijzigingen gaan verloren !')) redirect('wwv_flow_custom_auth_std.logout?p_this_flow=101&p_next_flow_page_sess=101:1');}" class="navbar-link">Uitloggen</a></div>
        <div class="app-user">Welcome: ADMIN</div>
      </div>
    </div>
    <div id="tabs">
      <div class="frame">
        <div class="bg">
          <div class="tab-holder">
          </div>
        </div>
      </div>
    </div>
    <div id="topbar"></div>
    <div id="messages"></div>
    <div id="body">
      <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
        <tbody>
          <tr>
            <td class="tbl-main" width="100%"><div class="rounded-corner-region" id="R9719141085411482" >
      <div class="rc-blue-top"><div class="rc-blue-top-r">
        <div class="rc-title">sdfsdf</div>
        <div class="rc-buttons"></div>
      </div></div>
      <div class="rc-body"><div class="rc-body-r"><div class="rc-content-main"><table id="apex_layout_9719141085411482" border="0" class="formlayout" summary="" role="presentation" datatable=0 ><tr><td nowrap="nowrap" align="right"><label for="P3_X" tabindex="999"><a class="optional-w-help" href="javascript:popupFieldHelp('9719940026416952','3963167387744880')" tabindex="999">X</a></label></td>
    <td  colspan="1" rowspan="1" align="left" valign="middle"><input type="hidden" name="p_arg_names" value="9719940026416952" /><input type="text" id="P3_X" name="p_t01" value="" size="30" maxlength="4000" class="text_field" /></td></tr>
    </table>
    </div></div></div>
      <div class="rc-bottom"><div class="rc-bottom-r"></div></div>
    </div></td>
            <td class="tbl-sidebar"></td>    
          </tr>
        </tbody>
      </table>
    </div><div id="footer"><div class="content">
      <div id="customize"></div> 
    </div></div>
    <input type="hidden" name="p_md5_checksum" value=""  /></form>
    <script type="text/javascript">
    apex.da.initDaEventList = function(){
    apex.da.gEventList = [
    {"triggeringElement":"document","triggeringElementType":"DOM_OBJECT","bindType":"bind","bindEventType":"ready",actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:function(){
       if (this.browserEvent !== 'load'){
          apex.jQuery(document).apex_modal_page('openPageFromApexThis', this);
    },"attribute02":"STATIC","attribute03":"f?p=101:21:3963167387744880::21:::","attribute05":"data-url","attribute06":"div#success-message","attribute07":"AUTO","action":"PLUGIN_COM_SKILLBUILDERS_MODAL_PAGE"},{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:apex.da.cancelEvent,"action":"NATIVE_CANCEL_EVENT"}]}];
    </script>
    <link rel="stylesheet" href="#PLUGIN_PREFIX#plugins/modal-page/server/TEST.css" type="text/css" />
    <script type="text/javascript" src="wwv_flow_file_mgr.get_file?p_plugin_id=34423998056404065675&p_security_group_id=4874907161072557&p_file_name=jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="wwv_flow_file_mgr.get_file?p_plugin_id=34423998056404065675&p_security_group_id=4874907161072557&p_file_name=apex_modal_page.min.js"></script>
    <script type="text/javascript">
    <!--
    apex.jQuery(document).ready(function(){
    (function(){apex.jQuery(document).apex_modal_page({
       "transition":"none",
       "draggable":true,
       "initialHeight":100,
       "initialWidth":300,
       "overlayOpacity":.5,
       "scrolling":true,
       "loadingImageSrc":""
    (function(){apex.da.initDaEventList();})();
    (function(){apex.da.init();})();
    //-->
    </script></body>
    </html>Apex 4.2 on same server etc, after upgrade generates code below :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
    <head>
      <title>sdfsdfsf</title>
      <link rel="stylesheet" href="/i/css/apex.min.css?v=4.2.0.00.27" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie.min.css?v=4.2.0.00.27" type="text/css" /><![endif]-->
    <link rel="stylesheet" href="/i/libraries/jquery-ui/1.8.22/themes/base/jquery-ui.min.css" type="text/css" />
    <script type="text/javascript">
    var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
    </script>
    <script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0.css" type="text/css" />
      <!--[if IE]><link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0_ie.css" type="text/css" /><![endif]-->
      <!--[if IE 6]><link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0_ie6.css" type="text/css" /><![endif]-->
      <!--[if IE 7]><link rel="stylesheet" href="/i/themes/theme_2/css/theme_4_0_ie7.css" type="text/css" /><![endif]-->
    </head>
    <body >
    <!--[if lte IE 6]><div id="outdated-browser">You are using an outdated web browser. For a list of supported browsers, please reference the Oracle Application Express Installation Guide.</div><![endif]-->
    <form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm" novalidate >
    <input type="hidden" name="p_flow_id" value="101" id="pFlowId" /><input type="hidden" name="p_flow_step_id" value="3" id="pFlowStepId" /><input type="hidden" name="p_instance" value="2102738057213" id="pInstance" /><input type="hidden" name="p_page_submission_id" value="6687700944614" id="pPageSubmissionId" /><input type="hidden" name="p_request" value="" id="pRequest" />
    <div id="header">
      <div id="app-logo"><a href="f?p=101:1:2102738057213"><span style="font-family:Arial; color:green; font-size:18; white-space:nowrap; font-weight:bold;">SoMStudie v1.06 - Productie</span></a></div>
      <div id="navbar">
        <div class="navbar-entry"><a href="javascript:{if (confirm('Applicatie uitloggen ? Niet opgeslagen wijzigingen gaan verloren !')) redirect('wwv_flow_custom_auth_std.logout?p_this_flow=101&p_next_flow_page_sess=101:1');}" class="navbar-link">Uitloggen</a></div>
        <div class="app-user">Welcome: ADMIN</div>
      </div>
    </div>
    <div id="tabs">
      <div class="frame">
        <div class="bg">
          <div class="tab-holder">
          </div>
        </div>
      </div>
    </div>
    <div id="topbar"></div>
    <div id="messages"></div>
    <div id="body">
      <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
        <tbody>
          <tr>
            <td class="tbl-main" width="100%"><div class="rounded-corner-region" id="R9719141085411482" >
      <div class="rc-blue-top"><div class="rc-blue-top-r">
        <div class="rc-title">sdfsdf</div>
        <div class="rc-buttons"></div>
      </div></div>
      <div class="rc-body"><div class="rc-body-r"><div class="rc-content-main"><table id="apex_layout_9719141085411482" border="0" class="formlayout"  summary="" role="presentation"><tr><td nowrap="nowrap" align="right"><label for="P3_X" tabindex="999"><a class="optional-w-help" href="javascript:popupFieldHelp('9719940026416952','2102738057213')" tabindex="999">X</a></label></td><td  align="left" valign="middle"><input type="hidden" name="p_arg_names" value="9719940026416952" /><input type="text" id="P3_X" name="p_t01" class="text_field"  value="" size="30" maxlength="4000"  /></td></tr></table></div></div></div>
      <div class="rc-bottom"><div class="rc-bottom-r"></div></div>
    </div></td>
            <td class="tbl-sidebar"></td>    
          </tr>
        </tbody>
      </table>
    </div><div id="footer"><div class="content">
      <div id="customize"></div> 
    </div></div>
    <input type="hidden" name="p_md5_checksum" value=""  /><input type="hidden" name="p_page_checksum" value="E08AB8A6D69B3450572EC2E89A528B29" id="pPageChecksum" /></form>
    <script type="text/javascript">
    apex.da.initDaEventList = function(){
    apex.da.gEventList = [
    {"bindEventType":"ready",actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:function(){
       if (this.browserEvent !== 'load'){
          apex.jQuery(document).apex_modal_page('openPageFromApexThis', this);
    },"attribute02":"STATIC","attribute03":"f?p=101:21:2102738057213::21:::","attribute05":"data-url","attribute06":"div#success-message","attribute07":"AUTO","action":"PLUGIN_COM_SKILLBUILDERS_MODAL_PAGE"},{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:apex.da.cancelEvent,"action":"NATIVE_CANCEL_EVENT"}]}];
    </script>
    <link rel="stylesheet" href="#PLUGIN_PREFIX#plugins/modal-page/server/TEST.css" type="text/css" />
    <script type="text/javascript" src="wwv_flow_file_mgr.get_file?p_plugin_id=34423998056404065675&p_security_group_id=4874907161072557&p_file_name=jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="wwv_flow_file_mgr.get_file?p_plugin_id=34423998056404065675&p_security_group_id=4874907161072557&p_file_name=apex_modal_page.min.js"></script>
    <script type="text/javascript">
    apex.jQuery( document ).ready( function() {
    (function(){apex.jQuery(document).apex_modal_page({
       "transition":"none",
       "draggable":true,
       "initialHeight":100,
       "initialWidth":300,
       "overlayOpacity":.5,
       "scrolling":true,
       "loadingImageSrc":""
    (function(){apex.da.initDaEventList();})();
    (function(){apex.da.init();})();
    });</script>
    </body>
    </html>Any suggestions why this plugin does not load on page load in 4.2 would be great ( a fix would be even better :) ).
    Regards

  • Modal Page Plugin showing Blank Page.

    Hi All,
    I am using Skillbuilder modal page 2.0 in APEX 4.2.
    Whenever I open the modal page, Blank page opens.
    Can anyone guide me what could be the problem.
    To open the modal page, I did the following steps.
    1. Installed Plugin 2.0
    2. From parent page I created a button. Set action to "Defined by Dynamic Action". (I also tried defining button id="CREAT_BUTTON" , Dynamic action with jQuery selector etc. as shown in sample video. But that also doesn't work.)
    3. Created Dynamic action, on Click, mentioned the button and gave the path of new page to open.
    4. Changed component setting for plugin, and set the theme to 1.

    Hi,
    Your "Embed in Frames" setting was set to "Deny" under Edit Application Properties -> Security -> Browser Security.
    I have set it to "Allow from same origin".
    This has resolved the issue. Please test.
    I suggest that you change the page template of page# 2 to "Popup". That way you can avoid application logo, navigation bar etc on the modal window.
    Thanks,
    Rohit

  • Skillbuilders modal page - success message not closing in Internet Explorer

    Hello,
    I'm using Skillbuilders modal page plugin on Apex 4.1.
    The plugin works great in all browsers except in IE, where I'm unable to close the success message by clicking on the "x" in the upper right corner.
    I'll explain further.
    I have a report on, say, page 10, and I'm editing each row in a modal page (page 11). Upon saving the changes, the modal page closes and a success message is shown on the page 10. I can see the message both in Firefox and IE, however, I am unable to close it in IE.
    When I inspect the success message using Firebug in Firefox, I see that I have:
    <div id="messages" style="display: block;">
    <div id="success-message" class="success">
    <img class="remove-message" onclick="$x_Remove('success-message');" alt="" style="float:right;" src="/i/delete.gif">
    Action processed.
    </div>
    </div>However, when I inspect the success message in IE, I see:
    <div id="messages">
    </div>The success message is shown on the page, but it doesn't show in the page source code, and clicking on the "x" doesn't close it.
    I've tried it with several themes, the problem persists.
    Does anyone have any idea what might be the problem here?
    Did someone have a similar problem?
    Thank you!

    I've been looking at it, kind of gutted that indeed the semi-colon means nothing. Was sure that was it, and then didn't bother to test it in the template anymore as it ate so much time already. That should teach me...
    Anyway, I was puzzled too. Apparently it has to do with IE8 and jQuery appending code to the document, whether it is .append or .before. The element is there and all, but the onclick just does nothing. Why did it work after editing it? Probably because IE was then able/willing to pick the attribute up.
    I've fiddled with it over and over, trying to find something ,googling it, but couldn't really find a certain cause nor fix. Putting   in the anchor? Nope. Onclick reacting only on second click? Nope. Just do an alert? Nope. Just nothing works at all. I really just gave up. IE8 is just such a headache that by trying to "fix" it in its ways you're off worse.
    In the end I fixed it in another way. My template is different than yours but the technique is the same.
    I removed the onclick attribute from the success message region, on both page templates. If it ain't gonna work I don't want it there (good riddance too). I changed the href attribute too by just putting "#" in, which is probably just me being pedantic. This is my result success message template:
    <section class="uRegion uWhiteRegion uMessageRegion clearfix" id="uSuccessMessage">
      <div class="uRegionContent clearfix">
        <a href="#" class="uCloseMessage"></a>
        <img src="#IMAGE_PREFIX#f_spacer.gif" class="uCheckmarkIcon" alt="" />
        <div class="uMessageText">
          #SUCCESS_MESSAGE#
        </div>
      </div>
    </section>To be able to close it, I added some javascript in the page header:
      <script type="text/javascript">
        $(document).delegate(".uCloseMessage", "click", function(){$(this).closest(".uMessageRegion").remove(); return false;});
      </script>This is much in the way of a dynamic action with scope "live". I didn't want to bother with having to put a dynamic action on each page, and is why I did it this way. It works fine in each browser too, so hurray.
    Your solution works too of course, it's much the same. I wouldn't call it a "workaround" too, since it didn't work initially anyway. I wouldn't look further and stick with what works best for you. :)

  • Skillbuilders Modal Page - End Open event

    Hi,
    I'm using Skillbuilders Modal Page 2.0.0. plugin on Apex 4.2, and I can't seem to get the event End Open to work.
    I stumbled upon this thread Skillbuilder Modal Page - Dynamic Title but the solution Tom suggested didn't help; nothing happens even if I set an alert to pop up on End Open.
    I will be grateful for any hint you may send my way.

    Hi, Tom, thanks for your reply!
    Yes, I'm using version 2.0.0.
    Yes, I changed the name of the event in the plugin settings: End Open - apexmodalpagecomplete.
    But maybe I'm using it wrong.
    I'm creating a new dynamic action, and the event is set to End Open.
    Then I have to choose Selection Type and I'm not really sure what to put there.
    Could you help me out?
    Thank you!
    Oh, and I will create an example on apex.oracle.com some time today.
    Edited by: Iris 314 on Apr 25, 2013 1:34 AM

  • Problem wth plugin modal page

    apex 4.1.1.00.23
    download skillbuilder modal page plugin; imported to application;
    made required changes;
    I IR with link column
    (select case when count(alias)=0 then null
                 else count(alias) end from instance_application
    where alias in (select alias from tnsnames t where t.host=i.host and t.sid=i.sid)) kbrappl
    Link text: #KBRAPPL#
    link attribute:
    id="#HOST#:#SID#" class="setClick" onclick="return false;"
    target URL: javascript:return false;
    Created DA
    event: Click
    selector Type: Jquery selector
    10. set value (parameter for call modal page);
    20. SkillBuilders Modal Page (2.0.0) [Plug-in]
    create page another report with template popup;
    It is working perfect on start page (until main IR filter changed or IR with mutiple pages going to next pages);
    It is look like changing filter or next page DA not Fire;
    Please help

    I solved the problem myself
    I set event scope: live
    Thanks 

  • SkillBuilders Modal Page... closes immediately after loading

    I would like to use the Modal Page plug-in from http://www.skillbuilders.com .*
    I installed the two sample applications from their web site with different results:
    The employee example works fine.
    The example with the modal feedback worked fine yesterday, but today it shrinks (after loading normally) so that I can't see anything but the bar with the window name and the close button.
    In my own application it's even worse:
    I have links in a table which should open a modal window on click.
    I tried several settings, but the only thing that's happening is that the window closes immediately after loading and showing the page for a half a second (or not at all).
    Leaving the "Auto-close On Element Selector" empty did not work. The default value "div#success-message" kept coming back until I replaced it with "null". But still no effect.
    Does anyone have any idea what could cause this behaviour?
    Best regards,
    Sabine
    The Security Settings for all three applications:
    Cache: Enabled
    Embed in Frames: Allow

    In the meantime I had the problem that the window didn't close at all, but I think I figured it out.
    So if the Modal Plug In does not work properly, check the following:
    <li>Does every process that should close the window have a 'Success Message' defined?
    <li>In the unconditional branch, is "include process success message" checked?
    <li>In the dynamic action, is "Auto-close On Element Selector" set to "div.t1success" in the true action?
    BTW: The "shrinking problem" described in the first post still exists - in IE. In Firefox, it works fine.
    Best regards,
    Sabine

  • Skillbuilder Modal popup turns black when click submit button

    Hi,
    Ive used the great skill-builder's plug-in to display my page 2 popup modally from page1 by clicking a button and it works as expected. However i realized when i click the Submit button on the popup page it turns black(pls get me right here its the background of the popup page-page2 not the first page-page1 i am talking about) while refreshing.
    apex 4.1.0/Oracle 11g Ent,
    any help please...regards.

    Skillbuilder Modal uses software named "Colorbox" for its modal presentation. The first problem that you had probably occured because you had not yet selected a theme. The position of the close button varies depending on the theme that you select. You selected theme 1, therefore the close button is in the lower right hand corner. Some of the other themes may better suit your taste. There are 5 to choose from. BTW, these themes cannot be easily changed so you pretty much have to decide on 1 of the 5. I think Dan is working on some more options with future releases of SB Modal.

  • Open Skillbuilders modal page from report

    I want to open the Skillbuilders modal page from within a report. The first column in a report represents the primary key of the table the report shows. What is the best way to do that?
    The idea is this: in the report region, there's a button CREATE that opens the modal dialog by Skillbuilders. A user can enter some data, clicks submit, modal dialog closes and report is refreshed. That's working now. Now I want to add a link to the first column in the report, that also opens the modal dialog, passing the value of the primary key of the row the user clicks on.
    I'm not that experienced with Javascript, I guess I'll have to create an dynamic action with a jquery selector, and as a true action, a javascript call to open the dialog. Can someone give me a start?
    Thanks in advance!

    You actually do not need that much javascript in this case. Simply design your column as you would normally do to create a link column.
    <ul>
    <li>Column Link: Provide a link text</li>
    <li>Link Attributes: onclick="return false;" class="show_modal"</li>
    <li>Set the target page and provide any items you want filled.</li>
    </ul>
    onclick="return false;" is to prevent the default behaviour of the anchor tag: navigate to the location specified in the href attribute. We want to open the modal page instead.
    Now to have the modal dialog open, create a dynamic action.
    <ul>
    <li>Event: Click</li>
    <li>Selection Type: jQuery Selector</li>
    <li>jQuery Selector: .show_modal</li>
    <li>Advanced > Event Scope: live (so the links will work after pagination)</li>
    </ul>
    For the true action, select the SkillBuilders Modal Page plugin, and make sure these are specified as following. This will take the location in the generated link columns and open a modal page for this location.
    So, this would open your edit page with the correct id (which you set up in the column link).
    </ul>
    <li>URL Location: Attribute of Triggering Element</li>
    <li>Attribute Name: href</li>
    </ul>
    If you set it up like this, you have the convenience of the standard column link definitions, no need for any javascript save onclick=false and no need to fill up page items and deal with submission to session state.

  • Modal page opening from link

    Hello,
    I would like to open a modal page (Skillbuilders) via a link.
    That is why I have  created a button with a dynamic action that opens the modal page.
    This REGION button is hidden (not rendering).
    I have this code as regions source:
    {code}
    <a href="" onclick="void(0);" id="P1250_POPUP">Text</a>
    {code}
    P1250_POPUP is the name of the region button.
    When I click on the link 'Text' my modal page (black) is seen one second and then closes (I see a black faded page only.
    The dynamic action is working when I just use the button (then not hidden).
    Does anyone know how to solve this?

    It's because the onclick does not overwrite the anchor default action which is to follow the href. So it'll open the modal but still redirect the page. Don't use the onclick attribute and use javascript:void(0); as url.
    <a href="javascript:void(0);" id="P1250_POPUP">Text</a>

Maybe you are looking for