Search code examples
oracleplsqloracle-apex

Oracle Apex Submit and Open modal in the same time


I want to make a double action on submit.

In this moment I have one form and I need to make two actions in the same time on submit. Below it's the first action to create n number of tabs and n number of record lines inside each tab. Now I'm trying keep this functionality which works and also open a modal window from another page and resubmit the page every time i click Submit button.

BEGIN
    IF (:P2_CREATE_TABS != 0 OR :P2_CREATE_TABS != NULL) AND :P2_CREATE_TABS <= 5 THEN
        htp.p ('<nav><div class="nav nav-tabs" id="nav-tab" role="tablist">');
        FOR k IN 1..:P2_CREATE_TABS
        LOOP
            IF k = 1 THEN
                htp.p ('<a class="nav-item nav-link active" id="nav-'||k||'-tab" data-toggle="tab" href="#nav-'||k||'" role="tab" aria-controls="nav-'||k||'" aria-selected="true">Document '||k||'</a>');
            ELSE
                htp.p ('<a class="nav-item nav-link" id="nav-'||k||'-tab" data-toggle="tab" href="#nav-'||k||'" role="tab" aria-controls="nav-'||k||'" aria-selected="false">Document '||k||'</a>');
            END IF;
        END LOOP;
        htp.p('</div></nav><div class="tab-content" id="nav-tabContent">');
        FOR l IN 1..:P2_CREATE_TABS
        LOOP
            IF l = 1 THEN
                htp.p ('<div class="tab-pane fade show active" id="nav-'||l||'" role="tabpanel" aria-labelledby="nav-'||l||'-tab">');
                    IF (:P2_LINES != 0 OR :P2_LINES != NULL) AND :P2_LINES < 20 THEN
                       htp.p ('<div class="row"><div class"col-md-6"  style="margin-left: 17em;"><table class="table">');
                       FOR i IN 1..:P2_LINES
                       LOOP
                           IF MOD(i,2) != 0 THEN
                               htp.p ('<thead><tr><th scope="col"> </th><th scope="col">Name</th><th scope="col">Type</th><th scope="col">Width</th><tbody>');
                               htp.p ('<tr><th scope="row">'|| i ||'</th><td>');
                               htp.p ( APEX_ITEM.HIDDEN(
                                   p_idx => 1,
                                   p_item_label => 'ID') );
                               htp.p ( APEX_ITEM.TEXT(
                                   p_idx => 2, 
                                   p_item_label => 'Name',
                                   p_attributes => 'class="form-control"'));
                               htp.p ('</td><td>');
                               htp.p ( APEX_ITEM.SELECT_LIST(
                                   p_idx           =>   3,
                                   p_list_values   =>   'Numeric;20',
                                   p_show_null     =>   'YES',
                                   p_null_value    =>   '10',
                                   p_null_text     =>   'Alphnumeric',
                                   p_item_label => 'Type',
                                   p_attributes => 'class="form-control"') );
                               htp.p ('</td><td>');
                               htp.p ( APEX_ITEM.TEXT(
                                   p_idx => 3, 
                                   p_item_label => 'Width',
                                   p_attributes => 'class="form-control"') );
                               htp.p ('</td></tr>');
                           END IF;
                        END LOOP;
                        htp.p ('</tbody></table></div><div class"col-md-6" style="margin-left: 17em;"><table class="table">');
                        FOR j IN 2..:P2_LINES
                        LOOP
                            IF MOD(j,2) = 0 THEN
                                htp.p ('<thead><tr><th scope="col"> </th><th scope="col">Name</th><th scope="col">Type</th><th scope="col">Width</th><tbody>');
                                htp.p ('<tr><th scope="row">'|| j ||'</th><td>');
                                htp.p ( APEX_ITEM.HIDDEN(
                                    p_idx => 1,
                                    p_item_label => 'ID') );
                                htp.p ( APEX_ITEM.TEXT(
                                    p_idx => 2, 
                                    p_item_label => 'Name',
                                    p_attributes => 'class="form-control"'));
                                htp.p ('</td><td>');
                                htp.p ( APEX_ITEM.SELECT_LIST(
                                   p_idx           =>   3,
                                   p_list_values   =>   'Numeric;20',
                                   p_show_null     =>   'YES',
                                   p_null_value    =>   '10',
                                   p_null_text     =>   'Alphnumeric',
                                   p_item_label => 'Type',
                                   p_attributes => 'class="form-control"') );
                                htp.p ('</td><td>');
                                htp.p ( APEX_ITEM.TEXT(
                                    p_idx => 3, 
                                    p_item_label => 'Width',
                                    p_attributes => 'class="form-control"') );
                                htp.p ('</td></tr>');
                            END IF;
                        END LOOP;
                        htp.p ('</tbody></table></div></div>');  
                    END IF;       
                htp.p ('</div>');
            END IF;
                htp.p ('<div class="tab-pane fade" id="nav-'||l||'" role="tabpanel" aria-labelledby="nav-'||l||'-tab">');
                    IF (:P2_LINES != 0 OR :P2_LINES != NULL) AND :P2_LINES < 20 THEN
                       htp.p ('<div class="row"><div class"col-md-6"  style="margin-left: 17em;"><table class="table">');
                       FOR i IN 1..:P2_LINES
                       LOOP
                           IF MOD(i,2) != 0 THEN
                               htp.p ('<thead><tr><th scope="col"> </th><th scope="col">Name</th><th scope="col">Type</th><th scope="col">Width</th><tbody>');
                               htp.p ('<tr><th scope="row">'|| i ||'</th><td>');
                               htp.p ( APEX_ITEM.HIDDEN(
                                   p_idx => 1,
                                   p_item_label => 'ID') );
                               htp.p ( APEX_ITEM.TEXT(
                                   p_idx => 2, 
                                   p_item_label => 'Name',
                                   p_attributes => 'class="form-control"'));
                               htp.p ('</td><td>');
                               htp.p ( APEX_ITEM.SELECT_LIST(
                                   p_idx           =>   3,
                                   p_list_values   =>   'Numeric;20',
                                   p_show_null     =>   'YES',
                                   p_null_value    =>   '10',
                                   p_null_text     =>   'Alphnumeric',
                                   p_item_label => 'Type',
                                   p_attributes => 'class="form-control"') );
                               htp.p ('</td><td>');
                               htp.p ( APEX_ITEM.TEXT(
                                   p_idx => 3, 
                                   p_item_label => 'Width',
                                   p_attributes => 'class="form-control"') );
                               htp.p ('</td></tr>');
                           END IF;
                        END LOOP;
                        htp.p ('</tbody></table></div><div class"col-md-6" style="margin-left: 17em;"><table class="table">');
                        FOR j IN 2..:P2_LINES
                        LOOP
                            IF MOD(j,2) = 0 THEN
                                htp.p ('<thead><tr><th scope="col"> </th><th scope="col">Name</th><th scope="col">Type</th><th scope="col">Width</th><tbody>');
                                htp.p ('<tr><th scope="row">'|| j ||'</th><td>');
                                htp.p ( APEX_ITEM.HIDDEN(
                                    p_idx => 1,
                                    p_item_label => 'ID') );
                                htp.p ( APEX_ITEM.TEXT(
                                    p_idx => 2, 
                                    p_item_label => 'Name',
                                    p_attributes => 'class="form-control"'));
                                htp.p ('</td><td>');
                                htp.p ( APEX_ITEM.SELECT_LIST(
                                   p_idx           =>   3,
                                   p_list_values   =>   'Numeric;20',
                                   p_show_null     =>   'YES',
                                   p_null_value    =>   '10',
                                   p_null_text     =>   'Alphnumeric',
                                   p_item_label => 'Type',
                                   p_attributes => 'class="form-control"') );
                                htp.p ('</td><td>');
                                htp.p ( APEX_ITEM.TEXT(
                                    p_idx => 3, 
                                    p_item_label => 'Width',
                                    p_attributes => 'class="form-control"') );
                                htp.p ('</td></tr>');
                            END IF;
                        END LOOP;
                        htp.p ('</tbody></table></div></div>');  
                    END IF;       
                htp.p ('</div>');
        END LOOP;
        htp.p('</div>');
    END IF;
END; 

I have created one Hidden Item and linked it to one Computation After Submit with PL/SQL Function Body, code below:

BEGIN
    IF :P2_CUST_NAME != '' AND :P2_ORG_NUM != NULL AND :P2_CONTACT_NUM != NULL AND :P2_EMAIL != '' THEN
        RETURN 'Y';
    END IF;
END;

Created a Branch After processing with server-side condition When Button Pressed = MY_BUTTON and Behavior set to desired page.

Next step I've created a Dynamic Action with Event=Dialogue Closed, Selection Type=Region and for the region I chose the region where i have the Submit Button.

In this moment, if i have something in first two input fields that creates Tabs and Fields inside tabs will create them dynamically automatically without any submit because i didn't force clear cache. If i change values and input the rest of fields, le wild modal window appears but the page it's not submitted and data it's not fetched again from fields to build other structure.

I think i'm close and i can't figure out what i'm doing wrong.

Thanks in advance !


Solution

  • Try making a Branch After Process that will run when Submit Button is clicked, then inside its set up, at the lower part, you can see 'Advanced' where you can set a Request. You can set/name any request, for example set it as, 'OPEN_MODAL'.

    Then on the redirected page(other page or same page) after submit, make a dynamic action on page load that will open the modal(javascript or pl sql) then set its condition to REQUEST = VALUE and set value as 'OPEN_MODAL'

    this will open the modal on the redirected page after submitting the main page.

    hope this helps.