Internet Explorer, Firefox, Opera, onChange and the fine art of checking boxes

Say you have an Apex page with a checkbox item and an onChange event handler attached to it.


If you are wondering why this page behaves differently when viewed with Firefox 2.0 and Opera 9.2 or with Internet Explorer 7.0, then you might find useful to know that
IE 7.0 will not fire the event until you move the focus to another element (by clicking somewhere else on the page for instance), whereas FF and Opera treat it much like the onClick event.

In order to make the behavior consistent across different browsers, i decided to replace onChange with onClick for checkboxes.

That's why i love sooo much javascript and its different implementations.

I didn't check if, at least, Internet Explorer is consistent across different versions, i'll leave this task as exercise for the student.

;-)

Forcing apex item buttons to do what you want

If you tried with little success to attach some javascript code to an Apex item button (not a region button, that's a piece of cake...) , it may console you to know that i have been in the same situation for some time.

I wanted to catch button clicks and display one of those classic, annoying pop up messages asking "do you really really really want to delete this stuff?"

With a normal region button it's pretty easy, although it's not so straightforward.

You need to go to the button property called optional URL redirect and pick the value URL and put something like:

javascript:confirmDelete('Press OK to delete the selected rows',
'MULTI_ROW_DELETE');

in the URL target attribute.

Unfortunately item buttons don't come with the same feature, so one starts wondering about some fancy way of hacking the system.

Luckily enough, if you opt for a template based button, there is a property called Attributes where apparently you can put your stuff.
But this is just the half of the moon.
Because the button template you are using might not include a #BUTTON_ATTRIBUTES# substitution string in its definition (as suggested in Apex on-line help), so, whatever you put there, it won't work because it will be left out.

So, to get to the other side of the moon, you need to customize the template button, or better, to make a copy of an existing one and customize the duplicate, just in case you don't want to mess up the entire application.

Here is how i did it:

first i picked the Button, Alternative 2 template (may be it doesn't exist such template in the theme you're currently using, so pick a different one) and copied it, using the built-in copy feature.
With much fantasy i renamed it to Button, Alternative 2, Custom.

Here is the template before i started hacking it:

<table class="t1ButtonAlternative2"
cellspacing="0" cellpadding="0"
border="0"  summary="">
<tr>
<td class="t1L">
<a href="#LINK#">
<img src="#IMAGE_PREFIX#themes/theme_1/button_alt2_left.gif"
alt="" width="11" height="20" />
</a>
</td>
<td class="t1C">
<a href="#LINK#">#LABEL#</a>
</td>
<td class="t1R">
<a href="#LINK#">
<img src="#IMAGE_PREFIX#themes/theme_1/button_alt2_right.gif"
width="11" height="20" alt="" />
</a>
</td>
</tr>
</table>

As you see there was no trace of the #BUTTON_ATTRIBUTES# mentioned above, so i changed it as follows:

<table class="t1ButtonAlternative2"
cellspacing="0" cellpadding="0"
border="0"  summary="">
<tr>
<td class="t1L">
<a href="#BUTTON_ATTRIBUTES#">
<img src="#IMAGE_PREFIX#themes/theme_1/button_alt2_left.gif"
alt="" width="11" height="20" />
</a>
</td>
<td class="t1C">
<a href="#BUTTON_ATTRIBUTES#">#LABEL#</a>
</td>
<td class="t1R">
<a href="#BUTTON_ATTRIBUTES#">
<img src="#IMAGE_PREFIX#themes/theme_1/button_alt2_right.gif"
width="11" height="20" alt="" />
</a>
</td>
</tr>
</table>

This template will work well provided you perform the following settings in the button definition:

• Pick Template based button as Style attribute
• Pick Button, Alternative 2 Custom (or whatever is in your case) as Template attribute
  
• Put the following text in the Attributes property

  javascript:confirmDelete('message to user','request string');

• Clear the content of the property Button Request Value
• Set the property Button Request Source Type to Always null

Happy scripting.

In praise of Monty Python

If you like Monty Python's sense of humour, you'll easily catch some famous quotes i deliberately scattered throughout this posting.

Today i am not here to register a complaint.

I just want to write down a couple of frequently used (and frequently forgotten...) tricks so that i know where to find them the next time i need them.

Number one is the 10g useful feature for delimiting long literal strings:

instead of the annoying double tick mark escaping technique that can easily become a mess when you have large and intricated strings:

sql := 'select ''this is a string'' from dual';

in 10g you can write:

sql := q'!select 'this is a string' from dual!';

No more escaping!
Please note the norwegian blue i used to highlight the relevant text.

Note that you can use any other character of your choosing in place of "!", should it conflict with the string content.
And here is the relevant oracle document snippet for the skeptical visitor.

I don't know about you, but i always manage to forget where the starting and ending exclamation points go and i can't figure it out without resorting to the manual.


And now for something completely different.


Perform a submit when clicking on a checkbox in Oracle Application Express.

Suppose you have an item defined as a checkbox, tipically some sort of flag that allows you to show some extra information when it's true or the standard stuff when it's false, and you want to automatically reload the page when the user clicks on it.

Open its definition and locate the attribute named HTML Form Element Attributes.
Put the following stuff in it:

onChange="javascript:doSubmit('RELOAD');"

be sure to have defined a branch handling either a RELOAD request or an unconditional branch, otherwise you'll get a run time error.

EDITED on 25/5/2007
It turns out that with Internet Explorer 7.0 there is a little problem with onChange.
Read more about it.


Nudge, nudge, wink, wink, say no more!

That's all for today.