Index
Index 2
Why I use Linux and Firefox
HTML DB & Javascript
The Basics
Enable/Disable Form Items
HTML DB Javascript Remix
Show/Hide/Toggle Form Items
htmldb_Get Introduction
AJAX & DHTML
AJAX
Set Multiple Items
(AJAX) Auto Update Report
(AJAX) Collection Control
(AJAX) Process On Demand
(AJAX) Report Pull
(AJAX) Report Row with Detail
(AJAX) Select Items
(AJAX) Set Item Value
(AJAX) Tree
htmldb_Get Aysnc Extension
DHTML
Form Element Focus
Progress Meter On Submit
Region Tabs
Report Row With Detail (iframe)
Report Row with Detail
Shuttle (Item Based)
Shuttle (PL/SQL Based)
Smart Table
List (DHTML Tree)
Show/Hide Report Columns
HTML DB Usage
Linked Reports
HTML/CSS/Layout
HTML DB DHTML Tree
Region Position
Report Row Templates
Multi Region Form Layout
Vertical Aligned Regions
Layout Example
SVG / Canvas
Canvas #1
Custom Charts
Thermometer
Scatter (Coming Soon)
Timeline (Coming Soon)
SVG Knowledge Tree
Pie Chart CSS
Bar Spacing
Application Exports / CSS / JS
Ajax And Collections
Collection Control
Collection
Collection_1
Collection_2
Collection_3
Add Collection Item
Return Format
TABLE
XML
NONE
Collection Functions
Collection Drop
Code
Application Level Items
Four application items have been created AJAX_COLLECTION_FORMAT , AJAX_CURRENT_COLLECTION_ACTION , AJAX_CURRENT_COLLECTION , AJAX_CURRENT_COLLECTION_ITEM
Javascript
<script language="JavaScript" type="text/javascript"> function ajax_Collection_Object(){ this.name = false; this.return_id = false; this.return_format = false; this.setvalue = false; this.action = false; //methods this.f_sort = lf_sort; this.f_add_item = lf_add_item; this.f_return = lf_return; this.f_truncate = lf_truncate; this.f_delete = lf_delete; this.lf_worker = lf_worker; return; function lf_sort(){ this.action = 'SORT'; return this.lf_worker(); } function lf_add_item(pValue){ this.action = 'ADD' this.setvalue = pValue; return this.lf_worker(); } function lf_return(){ return this.lf_worker(); } function lf_truncate(){ this.action = 'TRUNCATE'; return this.lf_worker(); } function lf_delete(){ this.action = 'DELETE'; return this.lf_worker(); } function lf_worker(){ if(this.name){ if(!this.return_format){ var get = new htmldb_Get(false,html_GetElement('p_flow_id').value,'APPLICATION_PROCESS=ajax_Collection',0); }else if(this.return_format == 'XML'){ var get = new htmldb_Get(false,html_GetElement('p_flow_id').value,'APPLICATION_PROCESS=ajax_Collection',0); }else{ var get = new htmldb_Get(this.return_id,html_GetElement('p_flow_id').value,'APPLICATION_PROCESS=ajax_Collection',0); } get.add('AJAX_CURRENT_COLLECTION',this.name); if(this.setvalue){get.add('AJAX_CURRENT_COLLECTION_ITEM',this.setvalue);} if(this.action){get.add('AJAX_CURRENT_COLLECTION_ACTION',this.action);} /* sets format of return */ if(this.return_format){ get.add('AJAX_COLLECTION_FORMAT',this.return_format); }else{ get.add('AJAX_COLLECTION_FORMAT','NONE'); } if(this.return_format == 'XML'){gReturn = get.get('XML');} else{gReturn = get.get();} get = null; return gReturn; }else{ return; } } // end object } </script>
ajax_Collection Process
begin if(upper(v('AJAX_CURRENT_COLLECTION_ACTION'))='ADD' and wwv_flow_collection.collection_exists(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION'))) = false) then HTMLDB_COLLECTION.CREATE_OR_TRUNCATE_COLLECTION(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION'))); end if; if(wwv_flow_collection.collection_exists(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION'))))then if(upper(v('AJAX_CURRENT_COLLECTION_ACTION'))='DELETE') then HTMLDB_COLLECTION.DELETE_COLLECTION(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION'))); elsif(upper(v('AJAX_CURRENT_COLLECTION_ACTION'))='TRUNCATE') then HTMLDB_COLLECTION.CREATE_OR_TRUNCATE_COLLECTION(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION'))); elsif(upper(v('AJAX_CURRENT_COLLECTION_ACTION'))='SORT') then HTMLDB_COLLECTION.SORT_MEMBERS(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION')),p_sort_on_column_number => 1); elsif(upper(v('AJAX_CURRENT_COLLECTION_ACTION'))='ADD') then HTMLDB_COLLECTION.ADD_MEMBER(p_collection_name =>upper(v('AJAX_CURRENT_COLLECTION')),p_c001 =>v('AJAX_CURRENT_COLLECTION_ITEM')); end if; if(upper(v('AJAX_COLLECTION_FORMAT'))!='NONE' and wwv_flow_collection.collection_exists(p_collection_name=>upper(v('AJAX_CURRENT_COLLECTION'))))then /*add extra output options here*/ if(upper(v('AJAX_COLLECTION_FORMAT'))='XML')then owa_util.mime_header('text/xml', FALSE ); htp.p('Cache-Control: no-cache'); htp.p('Pragma: no-cache'); owa_util.http_header_close; htp.p('<collection id="'||upper(v('AJAX_CURRENT_COLLECTION'))||'">'); for rec in (SELECT c001 FROM htmldb_collections WHERE collection_name = upper(v('AJAX_CURRENT_COLLECTION'))) loop htp.prn('<item>' || rec.c001 || '</item>'); end loop; htp.p('</collection>'); else htp.p('<table cellpadding="0" border="0" cellspacing="0" summary="" id="'||upper(v('AJAX_CURRENT_COLLECTION'))||'">'); htp.p('<tr><th>'||upper(v('AJAX_CURRENT_COLLECTION'))||'</th></tr>'); for rec in (SELECT c001 FROM htmldb_collections WHERE collection_name = upper(v('AJAX_CURRENT_COLLECTION'))) loop htp.prn('<tr><td>' || rec.c001 || '</td></tr>'); end loop; htp.p('</table>'); end if; end if; end if; /*clear all values from app level items*/ HTMLDB_UTIL.SET_SESSION_STATE('AJAX_COLLECTION_FORMAT',null); HTMLDB_UTIL.SET_SESSION_STATE('AJAX_CURRENT_COLLECTION_ACTION',null); HTMLDB_UTIL.SET_SESSION_STATE('AJAX_CURRENT_COLLECTION',null); HTMLDB_UTIL.SET_SESSION_STATE('AJAX_CURRENT_COLLECTION_ITEM',null); end;
Test Buttons and Javascript
<script language="JavaScript" type="text/javascript"> function cTest(pAction){ // create the ajax_Collection_Object var test_Object = new ajax_Collection_Object(); // holds return value if needed var lReturn; // sets current collection to work with test_Object.name = html_SelectValue('P57_COLLECTION'); // sets id to drop return value in test_Object.return_id = 'CollectionDrop'; // sets style of return NONE,TABLE,XML // TABLE returns a html table object // XML returns a javascript xml object // NONE supress's the return but still runs action test_Object.return_format = html_SelectValue('P57_RETURN_FORMAT'); if(pAction == 'DELETE'){ // delete collection lReturn = test_Object.f_delete();} else if (pAction == 'TRUNCATE'){ // truncate collection lReturn = test_Object.f_truncate();} else if (pAction == 'SORT'){ // sort collection lReturn = test_Object.f_sort()} else if (pAction == 'RETURN'){ // return collection lReturn = test_Object.f_return()} else if (pAction == 'ADD'){ // add item to collection lReturn = test_Object.f_add_item(html_GetElement('P57_TEST').value);} if(test_Object.return_format=='XML'){alert(lReturn);} test_Object = null; } </script> <input type="button" value="Add Item To Collection" onclick="cTest('ADD')" /><br /> <input type="button" value="Truncate Collection" onclick="cTest('TRUNCATE')" /><br /> <input type="button" value="Delete Collection" onclick="cTest('DELETE')" /><br /> <input type="button" value="Return Collection" onclick="cTest('RETURN')" /><br /> <input type="button" value="Sort Collection" onclick="cTest('SORT')" /><br />
Notes
Forum Link