Thursday, June 26, 2008

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 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.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);

function dGet(){
this.dTimeout = setTimeout("this.dCancel()",5000);

function dShow(){
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 + '" />';
document.onclick = function(e){
}else{return false;}
function dCheckClick(e){
var elem = html_GetTarget(e);
var lTable = $x_UpTill(elem,"DIV");

function dCancel(){
document.onclick = null;
get = null;

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.

1 comment:

sammy said...

Hi are you available for online chat if yes please respond to I have a peculiar problem with anchor control in my Apex page even after creating bookmarks the problem is not resolved its a bit urgent.Thanks in advance.