Confirmation Dialog when clicking on Tree Node.

Question

I am working on Oracle Apex 4.2.0.00.27 and I have the following problem:
The code below shows the definition of a tree. The tree displays records from the table ACTIVITIES in hierarchical structure.
When user clicks on a leaf/node of the tree he will be redirected to another page where the details of each Activity/leaf/node are displayed.
The tree is part of a page where I have established a functionality to check for changes on the input fields of the page and inform the user when he tries to redirect without first saving the changes he made.
What I want to do is:
WHEN user clicks on a node of the tree AND he hasn't saved any changes he made
THEN
trigger a confirmation dialog.
IF
he clicks OK he is redirected to the node details page as defined on the tree definition:
f?p=&APP_ID.:10:'||:APP_SESSION||'::::P10_ID:'||"ID"
ELSE if he clicks CANCEL
he stays on the same page.
The condition to trigger the confirmation box is:
if (document.getElementById('P0_CHANGES_DETECTED').value == 1)
where P0_CHANGES_DETECTED is a universal hidden text field that is set to +'1'+ every time a change is made.
and here is the tree definition:
select case when connect_by_isleaf = 1 then 0
when level = 1             then 1
else                           -1
end as status,
level,
+"NAME" as title,+
null as icon,
+"ID" as value,+
null as tooltip,
decode(PARENT_ID,null,null, 'f?p=&APP_ID.:10:'||:APP_SESSION||'::::P10_ID:'||"ID") as link
from "#OWNER#"."ACTIVITIES"
where GROUP_ID = :P20_GROUP_ID
start with "ID" in (select ID from "#OWNER#"."ACTIVITIES" where GROUP_ID = :P20_GROUP_ID and PARENT_ID is null)
connect by prior "ID" = "PARENT_ID"
order siblings by "ID"
I hope it is clear what I want to achieve. Thanks in advance.

Answer 1

So you'll want to bind an event to all tree nodes that checks for the value and then fires the confirmation if there value is 1.
Try something like this:
- first, give your static ID attribute in your tree the value of tree_static_id (or whatever you want. just replace the id selector below with what you choose).
- In your Page Function and Variable Declaration Javascript:
function confirmSave() {
var changeDetected = jQuery('#P0_CHANGES_DETECTED').val();
if(changeDetected == 1) {
//only do this if change is detected
if(confirm('You have unsaved changes. Do you want to leave this page?')) {
window.location('[your url here]');
jQuery(document).ready(function() {
//bind function to the click event
$('#tree_static_id').find('li a').bind('click', function() { confirmSave(); } });
});Hope this helps