Example: Cascading Popup LOVs (Solution using Ajax)

Question

If you need popup LOVs to depend on each other, here's a way to do it:
Put this in the header text of the page:
<script type="text/javascript">
function clearFormData(data) {
var items = new Array();
items.push(data);
for (var i = 0; i < items.length;i++) {
var item = items;
document.getElementById(item).value = '';
if (document.getElementById(item+'_HIDDENVALUE')) document.getElementById(item+'_HIDDENVALUE').value = '';
return true;
function setSessionData(data) {
var get = new htmldb_Get(null,document.getElementById('pFlowId').value,null);
var items = new Array();
items.push(data);
for (var i = 0;i < items.length;i++) {
var item = items[i];
var tempObjID = (document.getElementById(item+'_HIDDENVALUE')) ? item+'_HIDDENVALUE' : item;
get.add(item, document.getElementById(tempObjID).value);
get.get();
return true;
</script>
These are some helper functions (makes it easier to port to other pages, you could also put them in an external js file).
Now on the second (or whatever) popup LOV (one that needs the value of another), put following code into the field "Form Element Option Attributes":
[i]onclick="setSessionData('P1_FIRST_POPUP')"
Change "P1_FIRST_POPUP" into the id/name of the popup LOV that the second depends on.
Now to clear the second one (if there is already something in it) you can put this into the "Form Element Option Attributes" field of the first popup LOV:
onclick="clearFormData('P1_SECOND_POPUP')"
Change the "P1_SECOND_POPUP" into the id/name of the popup LOV that depends on the first one.
If you need more than one item to be set in the session use the javascript functions like this:
onclick="setSessionData(['P1_FIRST_POPUP','ANOTHER_ITEM';'AND_SO_ON'])"
onclick="clearFormData(['P1_SECOND_POPUP','ANOTHER_ITEM';'AND_SO_ON'])"
This is the best solution I figured out so far for cascading popups.
Demo: http://apex.oracle.com/pls/otn/f?p=36908:2
If you need cascading select boxes it's better to use this solution: http://apex.oracle.com/pls/otn/f?p=11933:37 .
Edit:
- works now regardless of being logged in or not, I just forgot to take ou the 0 in the htmldb_Get call (=> always
sent the session id "0", which didn't exist)
- added a link to the demonstration

Answer 1

excellent tip for using ajax to update session state.
one small change to share:
function setSessionData() {
var get = new htmldb_Get(null,document.getElementById('pFlowId').value,null,null);
for (var i = 0; i < arguments.length; i++) {
var item = arguments\[i\];
var tempObjID = (document.getElementById(item+'_HIDDENVALUE')) ? item+'_HIDDENVALUE' : item;
get.add(item, document.getElementById(tempObjID).value);
get.get();
return true;
set 4th argument to htmldb_Get constructor to null.. causes the script to retrieve the value from the hidden form field, rather than being set explicitely.
just noticed this code is different from the demo, which does set a static value of 2. Tempted to hit cancel, but maybe this can avoid someone else a lot of head scratching.
also, was having issues with Array.push() during debugging to find the above issue.. and changed the way html form element id(s) are passed to the function; opted to use the implicit "arguments" array instead. Minor, but worth noting.
thanks again for the useful piece of code.
edit:
this wiki doesn't parse brackets well; added char escapes so they'll show.. will need to remove by hand.