1

I have 3 radio buttons, and when I select one I want that the div corresponding div shows up.

<apex:form >
<apex:selectRadio value="{!livraison}" layout="pageDirection" id="radios">
<apex:selectOption id="a" itemLabel="{!$Label.EXT_LIVRAISON_TRANSPORTEUR}" itemValue="{!$Label.EXT_LIVRAISON_TRANSPORTEUR}"/>
<apex:selectOption id="b" itemLabel="{!$Label.EXT_ENLEVEMENT_LABO}" itemValue="{!$Label.EXT_ENLEVEMENT_LABO}"/>
<apex:selectOption id="c" itemLabel="{!$Label.EXT_CMD_JOINDRE_CONSEILLERE}" itemValue="{!$Label.EXT_CMD_JOINDRE_CONSEILLERE}"/>
</apex:selectRadio>
</apex:form>

<div id="diva">
blabla
</div>
<div id="divb">
blabla
</div>
<div id="divc">
blabla
</div>

<script type="text/javascript">
$(document).ready(function() { //cache les 3 div dès le départ
            $('#diva').hide();
            $('#divb').hide();
            $('#divc').hide();
        });
        $('[id$=a]').change(function() {
            if(this.checked) {
                $('#diva').show();
                $('#divb').hide();
                $('#divc').hide();
            }
        });
        $('[id$=b]').change(function() {
            if(this.checked) {
                $('#divb').show();
                $('#diva').hide();
                $('#divc').hide();
            }
        });
        $('[id$=c]').change(function() {
            if(this.checked) {
                $('#divc').show();
                $('#diva').hide();
                $('#divb').hide();
            }
        });
</script>

So here was my code, I don't get what I'm doing wrong... Thank you for your help :)

6
  • 3
    Visualforce prefixes ID values with the ID values of the containing elements. When using jQuery, you can use the endsWith selector on the ID value to do the matching. Also see Best Practices for Accessing Component IDs.
    – Keith C
    Jul 23, 2015 at 11:08
  • Thank you, I tried to put "input[id$='a']" instead of '[id$=a]' in my jquery function, but it still doesn't work.
    – dou
    Jul 23, 2015 at 12:21
  • is this ur complete code in your VF page ? r u including jquery script into your page ? do u see any javascript errors in your browser dev console ? Jul 23, 2015 at 12:43
  • No it's not my entire page, I have included the library of course, and by default my div are not displayed, if i comment the document ready function, my 3 div are displayed. So the problem comes from the id I guess, but I don't understand how fix it.
    – dou
    Jul 23, 2015 at 12:47
  • Shouldn't you include .change listeners in $(document).ready(function()? Also - is $ defined? Usually in visualforce you have to do it with j$ = jQuery.noConflict(), and then use j$ instead of $ as selector. Jul 23, 2015 at 13:04

1 Answer 1

2

I have modified your code as below and it is working as you have described. Hope this will help.

<apex:form >
    <apex:selectRadio layout="pageDirection" id="radios">
        <apex:selectOption itemLabel="radio1" itemValue="radio1"/>
        <apex:selectOption itemLabel="radio2" itemValue="radio2"/>
        <apex:selectOption itemLabel="radio3" itemValue="radio3"/>
    </apex:selectRadio>
</apex:form>

<div id="diva">
    diva
</div>
<div id="divb">
    divb
</div>
<div id="divc">
    divc
</div>

<script type="text/javascript">
        $(document).ready(function() {
            jQuery('[id$=diva]').hide();
            jQuery('[id$=divb]').hide();
            jQuery('[id$=divc]').hide();
            jQuery('input:radio[name$=radios]').change(function(){       
                var radio_value= $(this).val();
                if(radio_value=='radio1'){
                    jQuery('[id$=diva]').show();
                    jQuery('[id$=divb]').hide();
                    jQuery('[id$=divc]').hide();                
                }else if(radio_value=='radio2'){
                    jQuery('[id$=diva]').hide();
                    jQuery('[id$=divb]').show();
                    jQuery('[id$=divc]').hide();                
                }else{
                    jQuery('[id$=diva]').hide();
                    jQuery('[id$=divb]').hide();
                    jQuery('[id$=divc]').show();                
                }
            });
        });        
</script>
4
  • @dou This answers your question!
    – ajinkyah
    Jul 23, 2015 at 14:45
  • @dou If it worked for you, can you please mark it as answer.
    – Saroj Bera
    Jul 24, 2015 at 6:59
  • The above selected 'Best Answer' is not working as expected. I tried changing the radio buttons, but all the divs are visible..No div is hidden on selection/change.
    – Laxman
    Feb 16, 2016 at 14:01
  • @Laxman What you have changed, can you post your code?
    – Saroj Bera
    Feb 16, 2016 at 21:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .