Link to home
Start Free TrialLog in
Avatar of _Benaiah
_BenaiahFlag for Australia

asked on

APEX button at 'Bottom' position does not trigger Dynamic action

Hi all,

I have button with a 'Button Position' = 'Top and Bottom of Region' but only the top button triggers the 'Action'.  Clicking the button in the Bottom position produces no result.

Method:
1. Create a button with:
 - Name: 'FRED'
 - Button Position: 'Top and Bottom of Region'
 - Action When Button Clicked: 'Defined by Dynamic Action'

2. In the 'Tree View' right click on the button and select 'Create Dynamic Action'

3. For the 'True Action' select 'Execute JavaScript Code'
 - untick 'Fire On Page Load'
javascript:apex.submit('FRED');

Open in new window


4. Create a 'PL/SQL anonymous block' page process
 - On Submit - After Computations and Validations
BEGIN

  HTMLDB_MAIL.SEND(
      P_TO       => 'your email',
      P_CC       => '',
      P_BCC      => '',
      P_REPLYTO  => '',
      P_FROM     => '',
      P_SUBJ     => 'FRED sent.',
      P_BODY     => 'Debug'||chr(10)||
                    '');

END;

Open in new window


6. Run the application

7. The resulting HTML page includes the following elements related to FRED:
<button value="Fred" onclick="void(0);" class="button-default" type="button"  id="B134813911292903006">
  <span>Fred</span>
</button>

<button value="Fred" onclick="void(0);" class="button-default" type="button"  id="B134813911292903006">
  <span>Fred</span>
</button>


<script type="text/javascript">
apex.da.initDaEventList = function(){
apex.da.gEventList = [
 {"triggeringElementType":"BUTTON","triggeringButtonId":"B134813911292903006","bindType":"bind","bindEventType":"click",actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,"affectedElementsType":"EVENT_SOURCE",javascriptFunction:function (){ apex.submit('FRED');},"action":"NATIVE_JAVASCRIPT_CODE"}]}];
}
</script>

Open in new window


8. clicking on the upper button should send the email.  Clicking on the lower button should have no affect whatsoever.

I'm at my wits end. What have I done wrong?  I'm not aware of any AJAX calls that could be affecting the element...  No idea what is going on here.  Any help appreciated.


9. now change the button action to
 - Action: 'Redirect to URL'
 - URL Target: 'javascript:apex.submit('FRED');'

10. rerun application and test both buttons.  Now they work.

Thanks,
Avatar of Swadhin Ray
Swadhin Ray
Flag of United States of America image

Check this link for how to apply dynamic action on a button :

http://www.oracle.com/webfolder/technetwork/tutorials/obe/db/apex/r41/dynactions/dynactions.htm#t8

hope this will help you to understand how to utilize dynamic actions using buttons on Oracle APEX
And for triggering dynamic action on buttons check this blog:

http://www.talkapex.com/2010/12/apex-how-to-trigger-dynamic-action-from.html
I don't know AJAX, so it is just a tip:
In this PL/SQL block maybe an email is not set

BEGIN
  HTMLDB_MAIL.SEND(
      P_TO       => 'your email', -- is it set ?
      P_CC       => '',
      P_BCC      => '',
      P_REPLYTO  => '',
      P_FROM     => '',
      P_SUBJ     => 'FRED sent.',
      P_BODY     => 'Debug'||chr(10)||
                    '');

END;
Avatar of _Benaiah

ASKER

Hi slobaray,

1. The first link brings me back to the page that I used a few months ago while creating my first dynamic action.  I believe I have a good grasp of the basics now.

2. When following instructions at the second link provided I get the following error (while trying to save the button):
    "When the Action is 'Defined by Dynamic Action', the Button Attributes must not contain an ID"
  Which would seem to indicate that lack of an id is not the problem I'm facing.  i.e.
id="B134813911292903006"

Open in new window


2a. I followed the instructions as best as I could by specifying a static id ('B134813911292903006') and then changing the dynamic action to point to this DOM object. i.e.
 - selection type: 'DOM Object'
 - DOM Object: 'B134813911292903006'
But the button in the bottom position still does not respond to a mouse click action as before.


Hi Henka,

The code you selected is part of my PL/SQL code block and I have replaced 'your email' with my actual email in the live version.


Thanks heaps (both of you) for replies

<button value="Fred" onclick="void(0);" class="button-default" type="button"  id="B134813911292903006">
  <span>Fred</span>
</button>

<button value="Fred" onclick="void(0);" class="button-default" type="button"  id="B134813911292903006">
  <span>Fred</span>
</button>

I imagine this is why you're having a problem. I can't easily find this in the docs, but conceptually, an ID should only point to one element, whereas you have two of them.

Do you have #BUTTON_ATTRIBUTES" in your button template? You might also need to do this step:
http://docs.oracle.com/cd/E23903_01/doc/doc.41/e21674/advnc_dynamic_actions.htm
Button - Select the button that will trigger the dynamic action. If the button is a Template button, the button selected must use a button template that includes an ID attribute set to #BUTTON_ID#. The dynamic action framework relies on this ID value to reference the button.

An alternative solution is to create two different buttons, one at the top and the second one at the bottom, where each button will reference the same dynamic action.
Thanks gatorvip,

1. my button template has definition > normal template  of this code:
<button value="#LABEL#" onclick="#JAVASCRIPT#" class="button-default" type="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#">
  <span>#LABEL#</span>
</button>

Open in new window



2. I tried creating two different buttons (and functionally this was OK) but the client didn't like the way this was rendered on the page.  The new buttons appeared above & below the existing buttons - not alongside them as before.

3. This explains the problem at least
ID should only point to one element

But if I specify the Static button ID both top & bottom buttons are assigned that ID,
or whether I do not, APEX assigns both top & bottom buttons the same ID.
So I'm sunk either way.
1. There is an alternative - edit the button as follows:
- set the Button Attributes to  class="da-class"  (or whatever name you want, just make sure it's not used anywhere else)
- set the Action to Defined By Dynamic Action
- keep the button position as Top and Bottom

Now edit your Dynamic Action, more specifically the When portion:
- Event: Click
- Selection Type: jQuery selector
- jQuery Selector: .da-class (make sure it matches whatever class name you put in the Button and that you include the ".")
- Condition: No Condition

Then you can put apex.submit() in your True Action code (assuming the Action type is "Execute JavaScript Code").

The idea is that whenever you click on an item with that class name, then the dynamic action will be fired.

2. You can solve this problem by changing the position to a region-based location (Region Template Position)
Hi Gatorvip,

I've not had any exposure to jQuery.  I followed your instructions but when the button is clicked it doesn't do anything

Button Parameters
User generated image
Dynamic Action
User generated image
True Action on Dynamic Action
User generated image
Resulting HTML
<a class="eLink" title="Edit" href="javascript:popupURL('f?p=4000:381:1174717503194100:::381:P381_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:275608580861506711,142,14');" tabindex="999"><img src="/i/e.gif" alt="Edit" class="eLink" /></a><button value="Save" onclick="void(0);" class="button-default" type="button" class="da-class" id="B275608477927506711">
  <span>Save</span>
</button>

<a class="eLink" title="Edit" href="javascript:popupURL('f?p=4000:381:1174717503194100:::381:P381_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:275608580861506711,142,14');" tabindex="999"><img src="/i/e.gif" alt="Edit" class="eLink" /></a><button value="Save" onclick="void(0);" class="button-default" type="button" class="da-class" id="B275608477927506711">
  <span>Save</span>
</button>

<script type="text/javascript">
apex.da.initDaEventList = function(){
apex.da.gEventList = [
{"triggeringElement":".da-class","triggeringElementType":"JQUERY_SELECTOR","bindType":"bind","bindEventType":"click",actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:function (){ 
   if (confirm('OK to Save, Cancel to FRED'))
   {
        apex.submit('SAVE');
   }
   else
   {
        apex.submit('FRED');
   }
},"action":"NATIVE_JAVASCRIPT_CODE"}]},
{"triggeringElementType":"BUTTON","triggeringButtonId":"B134813911292903006","bindType":"bind","bindEventType":"click",actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,"affectedElementsType":"EVENT_SOURCE",javascriptFunction:function (){ apex.submit('FRED');
},"action":"NATIVE_JAVASCRIPT_CODE"}]}];
}
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of gatorvip
gatorvip
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi thanks
Sorry, couldn't get this to work.  I used work-around by simplifying button functionality.  Info was useful however.  Thanks.