Ajaxed Tree

Question

Hi all,
I have created a tree which is working as my navigation aid to tabs, it is using following query
select "PAGE_NO" id,
"PARENT_PAGE_NO" pid,
"NAME" name,
CASE WHEN NAVIGATION = 'Y' THEN 'f?p=&APP_ID.:'||page_no||':&SESSION.::NO::P0_PARENT_TAB:'||PARENT_TAB||'' ELSE null END LINK,
null a1,
null a2
from "#OWNER#"."APEX_PAGES" where page_no not in (select "PAGE_NO" from "#OWNER#"."APEX_USER_PAGES" where "APP_USER"=:APP_USER)
order by IDENTIFIER
But my problem is that page even refreshes when i just click its expand or collapse icon. How can i stop page from refreshing when i click expand or collapse button??? The answer is probably AJAX. But i don't know how can i implement ajax in application express. I have seen few examples, such as BUILDING AJAX MEMORY TREE, but was unable to proceed any furthur. Can anyone explain me step by step, how can i implement ajax in my application on the tree.
Thanks a lot
Sunil Bhatia

Answer 1

Hi,
OK - In my example, page 1 shows the tree but it is defined on page 2.
To set this up, do the following:
1 - Create TWO application items (through Shared Components, Application Items):
G_TREE_ROOT
TEMP_REQUEST
2 - Create an Application Computation (through Shared Components, Application Computations):
Application Item: G_TREE_ROOT
Computation Point: Before Header
Computation Type: Static Assignment
Computation: 7839
These settings are based on using the EMP table for the test pages - 7839 is KING, the top person in the tree, so I just need to set this value. Adjust these as required for your tree.
This computation should be conditional on G_TREE_ROOT being NULL - this ensures that this item gets an initial value
3 - Create a new Page template (through Shared Compenents, Templates) - this should be created "From scratch" rather than as a copy of an existing template. This new template is so that we can output only the contents of a page region rather than an entire page - I call this template "Page Snippet"
When created, edit it. You only need two settings:
Header: (enter a space)
Body: #BOX_BODY#
The space is required as the Header definition is required. #BOX_BODY# will be replaced by the contents of the region on the page
4 - Now create a new page in your app. This should be a "Tree" page - in my example, this is page 2.
The tree's SQL query should be:
select "EMPNO" id,
       "MGR" pid,
       "ENAME" name,
       null link,
       EMPNO a1,
       'f?p=&APP_ID.:1:&SESSION.::::P1_EMPNO:' || EMPNO A2
from "#OWNER#"."EMP"On my page 1, I will have a page item (P1_EMPNO) and a report filtered using this value - A2 is going to be used to create a link to populate P1_EMPNO. The link is not set using the normal LINK item.
The Application Item for the tree needs to be set to G_TREE_ROOT. You should, though, create it as P2_TREE_ROOT to start with and we can change this later
5 - When the tree page has been created set the page to use your new "Page Snippet" page template
6 - You must only have one region on this page - this should, of course, be the region containing the tree. As you don't need anything else on the page, including the buttons, delete everything except for the tree region
7 - On your tree page, add in a new Process:
Name: P2_SET_REQUEST
Process Point: On Load - Before Header
Process:
BEGIN
APEX_APPLICATION.G_REQUEST := :TEMP_REQUEST;
END;8 - Now click on the Tree link in the region to go to the tree's definition.
Change the tree's Application Item setting to: G_TREE_ROOT
Then, you need to adjust a number of the settings in the tree's templates:
Unexpanded Parent:
<td>
<a href="#" onclick="javascript:getTree('EXPAND,#A1#');">
  <img src="#IMAGE_PREFIX#Fndtre02.gif" width="16" height="22" border="0">
</a>
</td>Unexpanded Parent Last:
<td>
<a href="#" onclick="javascript:getTree('EXPAND,#A1#');">
  <img src="#IMAGE_PREFIX#Fndtre03.gif" width="16" height="22" border="0">
</a>
</td>Expanded Parent:
<td>
<a href="#" onclick="javascript:getTree('CONTRACT,#A1#');">
  <img src="#IMAGE_PREFIX#Fndtre05.gif" width="16" height="22" border="0">
</a>
</td>Expanded Parent Last:
<td>
<a href="#" onclick="javascript:getTree('CONTRACT,#A1#');">
  <img src="#IMAGE_PREFIX#Fndtre06.gif" width="16" height="22" border="0">
</a>
</td>Parent Node Template:
<tr>
#INDENT#
<td colspan="#COLSPAN#" valign="CENTER" class="tiny">
  #NAME# #DRILL_UP#
</td>
</tr>Node Text Template:
<tr>
#INDENT#
<td colspan="#COLSPAN#" valign="CENTER" class="tiny">
  #NAME#
</td>
</tr>Name Link Anchor Tag:
<a href="#A2#">#NAME#</a>Name Link Not Anchor Tag:
<a href="#A2#">#NAME#</a>8 - On your page 1 (where the tree will actually be displayed), set the page template to one that includes ".. with Sidebar" - this allows you to use region position 2 to show the tree on the left
9 - Then create a new HTML region and put this in the Page Template Region Position 2 display point. The source of this region should be:
<div id="MyTree"></div>10 - Then add another HTML region on your page. This should use No Template and be in the Before Footer display point. The source of this should be:
<script type="text/javascript">
function getTree(req)
  var get = new htmldb_Get(null,$x('pFlowId').value, null, 2);
  get.add('TEMP_REQUEST', req);
  var gReturn = get.get(null,'<htmldb:BOX_BODY>','</htmldb:BOX_BODY>');
  document.getElementById('MyTree').innerHTML = gReturn;
  document.getElementById('MyTree').innerHTML += "";
  get = null;
  gReturn = null;
getTree('');
</script>11 - Then add a report on the page. The source of this should be:
SELECT EMPNO, ENAME, JOB, SAL, COMM
FROM EMP
WHERE EMPNO = :P1_EMPNO12 - Add a new page item to the report region. This should be a "Display as Text (saves state)" item and called P1_EMPNO
To explain how this works:
Firstly, a Region Pull should only pull contents of a region that does not contain any page items. The region should be the only thing on the page and the page itself must not contain the normal page layout (that is, there should be no tabs etc) - hence the "Page Snippet" page template
When you click on a normal tree's + or - icons for an item, it actually passes a request of either CONTRACT,xxx or EXPAND,xxx (where xxx is the ID for the node being expanded/collapsed).
The getTree() function receives as a parameter a value that we can use for the request. Initially, this is an empty string, so the tree will display in its default state.
Then, as you click on a + or - on our adjusted tree, a call is made to the getTree() function passing in the desired CONTRACT or EXPAND value.
In the Ajax call (the htmldb_Get() function), we do not call an application process (the second null parameter) but tell it that we want the output from page 2 (the final parameter)
The get.add(..) line passes our request value into the TEMP_REQUEST application item. This is done before the get.get(..) call - which does the actual pull.
When page 2 is being rendered on the server, the "On Load - Before Header" takes the value from the TEMP_REQUEST item and sets it as the proper request value for the page. The tree then renders using this (in the same way as it would if the request value was passed via the URL)
The get.get(..) line, retrieves everything on page 2 and updates the DIV tag contents in our page 1 region - which now shows the expanded or collapsed node(s).
As we have updated the tree's definition to call javascript when the + or - are clicked, the actual links are defined in the additional A1 and A2 fields that are available on a tree's SQL. We position #A1# and #A2# on the tree's templates where we want the link to appear - hence having to update so many of the tree's template definitions.
Hopefully, you should be able to adjust the above to fit your application - just remember that my page 1 is the page that is being displayed to the user and page 2 contains the tree. As long as you follow the same steps as above and adjust for your page numbers and SQL, you should be able to achieve your results
Andy