Newbs Blog | Getting Action Buttons to open the underlying link when any part of the cell is clicked

Thursday 2nd, February 2006

Getting Action Buttons to open the underlying link when any part of the cell is clicked02/02/2006 04:35 PM

Category : Lotusphere

Location : Columbus, Ohio, USA

During Scott's and my Hand's On session at Lotusphere 2006, we were asked how to make HTML action buttons perform the action when an area of a cell outside the link is clicked. We did get it to behave graphically as if it had been clicked, but did not show the actual function being performed unless you clicked the link text, or hotspot.

An attendee, Brent, called me on it. I got caught me in a typical hackers "White Lie". I knew that it "could" be done, but I'll admit, I had not previously done it.... NOW I HAVE!
The key is to understand that all elements are objects contained within other elements. The Action Buttons table cell therefore have within them the anchor tag (<A>). For Action bars these do a very nasty thing of defining the href as null and then processing an onclick event with a "_doClick()" call and some pretty gnarly domino generated parameters. So the trick is to make a call from the onmousedown event of the table cell that is capable of locating and parsing the information for you.... Here it is (First you might want to get the sample databases from the session using the links on the left.)

Step 1 - Add a new routing to the JS Header (I put it right after the setupABarTables code)

function runABLink(abCell) {
var aref = abCell.getElementsByTagName("A")[0];
var dcl = new String(aref.onclick)
idx = dcl.indexOf( "_doClick(" )
idx2 = dcl.indexOf( ", this" )
var dcl1 = dcl.substr( idx+10, idx2 - (idx+11))
// this is debugging stuff that is neat to look at for hackers like me.
// alert("aref.text: [" + aref.text + "]\nidx [" + idx + "]\nidx2 [" + idx2 + "]\ndcl [" + dcl + "]\ndcl1 [" + dcl1 + "]")
return _doClick(dcl1, abCell, null)
}

Step 2 - In the setupABarTables method change the line from
ac[i].onmousedown = function() {this.className = "ieClick2";}

to
ac[i].onmousedown = function() {this.className = "ieClick2"; return runABLink(this); }

I have tested this in FireFox and IE6 with one action button so far and will be working on forms with multiple buttons soon. Let me know how it works for you.

Comments :

1. Curt Stone02/11/2006 06:48:38 AM
Homepage: http://curtstone.dominodeveloper.net

Cool Henry, I'll try this.
I really enjoyed this session even if I had to do the Hands On piece at home. The combination of a presentation and a hands on session is very powerful. How else can someone learn this stuff until they try on their own.
Hope you had a great time at SeaWorld! We did!
P.S. Give Scott a hard time cause he doesn't have your blog listed on his blog role.

2. Newbs02/13/2006 11:02:46 AM
Homepage: http://www.henrynewberry.com

Curt:

I do not need an excuse to give Scott a hard time, and he frequently returns the favor. I am trying to learn the political correctness of being an employee and not abusing the boss.

Note: I said trying, not necessarily succeeding!