Accordion using JQuery

Created this demo site where I will be posting new things I try out. It now has a page to show how to get JQuery accordion running within Apex, it's so simple to setup and use. Hope you guys like it. JQuery is so cool, this weekend was dedicated to it. Why didn't I look into it earlier? :)

Updated: 2/2/09: Also added DatePicker (page level and application level)

Oracle Apex AJAX Resources

New 3.1 Stuff

New 3.1 Stuff (part 2)

Oracle Tutorial

JQuery Integration Demo Site

Intro to Apex AJAX framework

Testing On Demand Process using URL

AJAX with JSON

AJAX Code Generator

Carl's New Demos

Steve's Document

iAdvice article 1

iAdvice article 2

Carl's Old Demo site

MAC style menu

Apex with AJAX - Display Thumbnail on MouseOver

This is my first major technical blog, so I am pretty excited about it. :)

I had to display a thumbnail when I click on a row, on further search, came across the following website that lists a lot of APEX/AJAX related things, so I decided to give that a try. There's a page where AJAX is used to display Item Help when the user does a mouse over a particular Item. I got a brainwave, hmmm how about I use that to display a picture instead? So here I was, breaking my head over it and was finally able to figure it all out after a couple of hours of hard work, without actually adding any application level items or processes, it's pretty neat. Check out the Statistics page in http://www.philadelphiacricketleague.com for a demo, mouse over the name of a player.

Here's what I did:

(Step 1): I had a report that displays a list of players. On this page, I added the following Javascript in the HTML HEADER section:

<script type="text/javascript">
function AJAX_PIC(pThis,pId){

this.dTimeout;
clearTimeout(this.dTimeout);
this.dGet = dGet;
this.dShow = dShow;
this.dCancel = dCancel;
/* var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=AJAX_ITEM_HELP',0);
*/
var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=',0);
this.dGet();
return;

function dGet(){
this.dTimeout = setTimeout("this.dCancel()",5000);
//get.add('TEMPORARY_ITEM',pId);
get.GetAsync(dShow);
}

function dShow(){
$x_Hide('rollover');
if(p.readyState == 1){
}else if(p.readyState == 2){
}else if(p.readyState == 3){
}else if(p.readyState == 4){

$x('rollover_content').innerHTML =
'<img src="p?n=' + pId + '" />';
$x_Show('rollover');
htmldb_IE_Select_Item_Fix($x('rollover'));
$x_Style('rollover','left',findPosX(pThis)+pThis.offsetWidth+5);
$x_Style('rollover','top',findPosY(pThis)-($x('rollover').offsetHeight/2)+($x(pThis).offsetHeight/2));
document.onclick = function(e){
dCheckClick(e);
}
}else{return false;}
}
function dCheckClick(e){
var elem = html_GetTarget(e);
try{
var lTable = $x_UpTill(elem,"DIV");
if(lTable.id!='rollover_content'){dCancel();}
else{}
}catch(err){dCancel();}
}

function dCancel(){
$x_Hide('rollover');
document.onclick = null;
get = null;
}
}
</script>

The above is a modification of the original JavaScript. Note, I commented out the application process, and also the related parameter. So basically there's no application item or process. Then I updated the code where the innerHTML is set, and changed it to a image tag. The pID value is basically the ID related to the image that's stored in the HTMLDB_APPLICATION_FILES table.

(Step 2): Then for the Report, added the following to the REGION FOOTER:

<div id="rollover" style="display:none;background:#FFF;width:150px;position:absolute;z-index:9999"> <div id="rollover_content" style="padding:4px;border:2px "> </div>

(Step 3): Then in the Report attributes, open up the column for which the thumbnail needs to be displayed, and added the following code in the HTML EXPRESSION for the Column Attributes:

<a href="" onmouseover="AJAX_PIC(this,'#ID#')">#NAME#</a>

Where ID is the value from HTMLDB_APPLICATION_FILES tables corresponding to the picture. Basically Oracle Apex displays any picture from the HTMLDB_APPLICATION_FILES table if you use the following syntax:

<img src="p?n=15900401113612336" />

The number above is the ID for the image.

I also came across another neat way to do this, but it needs you to upload a JavaScript file. The details are in Dimitri's blog, here's the URL.


That's about it! Please leave any feedback if you find this useful or streamline it further.