_Benaiah
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'
4. Create a 'PL/SQL anonymous block' page process
- On Submit - After Computations and Validations
6. Run the application
7. The resulting HTML page includes the following elements related to FRED:
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('F RED');'
10. rerun application and test both buttons. Now they work.
Thanks,
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');
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;
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>
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('F
10. rerun application and test both buttons. Now they work.
Thanks,
And for triggering dynamic action on buttons check this blog:
http://www.talkapex.com/2010/12/apex-how-to-trigger-dynamic-action-from.html
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;
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;
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.
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
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"
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.
ASKER
Thanks gatorvip,
1. my button template has definition > normal template of this code:
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
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. 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>
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)
- 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)
ASKER
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
Dynamic Action
True Action on Dynamic Action
Resulting HTML
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
Dynamic Action
True Action on Dynamic Action
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi thanks
ASKER
Sorry, couldn't get this to work. I used work-around by simplifying button functionality. Info was useful however. Thanks.
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