Apex Code Development You need to sign in to do that
Don't have an account?
eliotstock2 event handlers for radio buttons
Hi there.
I have a couple of radio buttons and I want clicking either of them to result in the form submitting itself (for which I have a function that does some other stuff before submitting).
<apex:selectRadio value="{!mode}" layout="pageDirection" id="modeSelect" onChange="toggleMode()"> <apex:selectOption itemValue="oneByOne" id="oneByOneRadio" itemLabel="Enter hours for each volunteer individually"/> <apex:selectOption itemValue="splitTotal" id="splitTotalRadio" itemLabel="Split the following number of hours evenly among all volunteers:"/></apex:selectRadio>
With the event handlers like this, with an onChange on the selectRadio only and nothing on the selectOptions, this will work ok with Firefox but not with IE. IE only fires the onChange event *after* you click or tab away from the radio button you just checked. So this is no good.
What would work is if I could make that event handler an onClick instead of an onChange, and preferably put it on the selectOption tags rather than the selectRadio. IE does fire the onClick event when you expect. However this is not possible with Salesforce, as far as I can tell. If I use an onClick attribute in the VF like so:
<apex:selectOption itemValue="oneByOne" id="oneByOneRadio" onClick="toggleMode()" itemLabel="Enter hours for each volunteer individually"/>
is not rendered in the HTML at all:
<input type="radio" checked="checked" name="VolunteeringTeamEvent:form:j_id1:modeSelect" id="VolunteeringTeamEvent:form:j_id1:modeSelect:0" value="oneByOne" /><label for="VolunteeringTeamEvent:form:j_id1:modeSelect:0"> Enter hours for each volunteer individually</label>
Is this a bug?
Thanks in advance,
Eliot.
Eliot,
Your posted code is mangled. In my experience, this happens if you post with Safari. Can you edit your post and repaste the code, using Firefox?
Eliot,
I haven't studied your code carefully, but you can get a bit more control by adding javascript. You can create a javascript function that invokes an apex method (see actionfunction), and you can also attach such functions to arbitrary events (you'll need to learn how to reference vf components in javascript). Below is a sketch.
Note that I have not tested this code, and also that html radio buttons seem to have pretty idiosyncratic behavior. For an application where I wanted radio buttons, I ended up using multiple inputCheckboxes and implementing the mutually exclusive behavior in apex, with a wrapper class.
<apex:actionFunction action="{!myApexMethod}" name="myApexMethodFromJS"/>
<apex:selectOption itemValue="oneByOne" id="oneByOneRadio" onClick="toggleMode()" itemLabel="Enter hours for each volunteer individually"/>
<script>
var oneByOneRadio = document.getElementById("{!$Component.oneByOneRadio}");
oneByOneRadio.onclick = myApexMethodFromJS;
</script>
By the way, Firebug should be your hard and fast friend in exploring and testing this kind of stuff.Thanks for you suggestion. I had the same idea, but the component ID is not resolving for the radio button. This in the VF:
var oneByOneRadioButton = document.getElementById("{!$Component.oneByOneRadio}");
becomes this in the HTML:
var oneByOneRadioButton = document.getElementById("VolunteeringTeamEvent:form:j_id1:oneByOneRadio");
but that's not the ID of the radio button tag. This is its ID:
<input type="radio" checked="checked" name="VolunteeringTeamEvent:form:j_id1:modeSelect" id="VolunteeringTeamEvent:form:j_id1:modeSelect:0" value="oneByOne" />
It seems that VF renders radio buttons inside a table, like this:
<apex:selectRadio value="{!country}" id="the_radio"> <apex:selectOptions value="{!items}"/> </apex:selectRadio> <script>var the_radio = document.getElementById("{!$Component.the_radio}");</script>
<table id="j_id0:j_id1:the_radio"> <tr> <td> <input type="radio" name="j_id0:j_id1:the_radio" id="j_id0:j_id1:the_radio:0" value="US" /> <label for="j_id0:j_id1:the_radio:0"> US</label> </td> </tr> </table>
If you want to attach event handlers to the selectoptions, you can either start with the table component and use js to navigate thru the DOM (carefully, so your code won't break when salesforce changes their implementation), or use inputCheckboxes, and implement the logic that causes one button to unclick the others in apex (or js).
Thanks again. In the end I managed to get a handle on the radio button directly by cheating like so:
var oneByOneRadioButton = document.getElementById("{!$Component.modeSelect}:0");
However this would break if Salesforce ever changed the way it ID'ed tags.
The whole thing is too error prone and bug ridden really, so I've had to go back to using a submit button. Pity. Thanks for your help though.