Skip to main content
3 of 4
Added controller code

Rerendering nested output panel at onChange event of Selectlist not working

Can anybody tell me what goes wrong with the below code?

<div class="form-group row">
    <apex:outputPanel id="Panel1" rendered="{!uhasAccess}">
        {!isExists} <!--- This shows as true -->
        <label>is Exists</label>                                                 
        <apex:inputCheckbox id="isSelected" value="{!isExists}" /> <!-- Initially selected  -->
    </apex:outputPanel>
</div>
<div class="form-group row">
    <label>Select Value:</label>
    <apex:selectList value="{!selReason}" size="1" styleClass="ddlDeploy" style="width:170px;">
        <apex:selectOptions value="{!lstReason}"/>
        <apex:actionSupport event="onchange" action="{!SetChangeFlag}" reRender="rPanel2,UpdateBlock,MsgPanelBlock" status="UpdatePanel" />
    </apex:selectList>
</div>
<apex:outputpanel id="rPanel2">
    <apex:outputpanel rendered="{!isReplacement}">
        {!isExists} <!-- On changing the dropdown, this is showing false here in this panel, but checkbox remains selected in the above code -->
        <div class="form-group row">
            <label>Details:</label>               
        </div>
        <div class="form-group row">
            <label>Value (1):</label>
            <apex:input styleClass="textBox" value="{!uValue1}" id="txtrValue1" disabled="true" html-placeholder="Old Value"/>  &nbsp;&nbsp;   
            <apex:input styleClass="textBox" value="{!rnValue1}" id="txtrnValue1" html-placeholder="New Value"/> 
        </div>
        <apex:outputPanel id = "Panel3" rendered="{!isExists}">    <!-- The issue lies here. This panel is not getting rerendered.. -->                                             <div class="form-group row">
                <label>Value (2):</label>
                <apex:input styleClass="textBox" value="{!uValue2}" id="txtrValue2" disabled="true" html-placeholder="Old Value"/> &nbsp;&nbsp;    
                <apex:input styleClass="textBox" value="{!rnValue2}" id="txtrnValue2" html-placeholder="New Value"/> 
            </div>
        </apex:outputPanel>
    </apex:outputPanel>
</apex:outputPanel>

Controller code:

public class TestController {
        public Boolean uhasAccess {get;set;}
        public Boolean isExists {get;set;}
        public String selReason {get;set;}
        public List<SelectOption> lstReason {get;set;}
        public Boolean isReplacement {get;set;}

        public TestController () {
            BindValues();
        }
    public List<SelectOption> getlstReason()
        {
            List<SelectOption> options = new List<SelectOption>();
           
            options.add(new SelectOption('select','----Select----')); 
            options.add(new SelectOption('H/W - Crash','H/W - Crash'));
            options.add(new SelectOption('H/W - Motherboard change','H/W - Motherboard change'));               
            return options;
        }  
    public void BindValues()
    {
        isReplacement = false;  
        isExists = true;
        uhasAccess = true;
    }    
        public void SetChangeFlag()
        {        
            if(selReason != 'select')
            {
                isReplacement = true;
            }
            else
            isReplacement = false;     
        }
}

I have a checkbox and a dropdownlist. On changing the dropdownlist, the {!isReplacement} flag will be set reRendering the outputpanel rPanel2. But on reRendering, the subPanel Panel3 remains hidden even when {!isExists} is true/checked. it looks like Panel3 is not reRendered

And also, inside the same panel {!isExists} shows as true at Panel1 and the same variable shows as false at Panel3 on reRendering. I have tried most of the ways by wrapping the output panel inside pageBlock and another Output Panel, also tried to reRender Panel3 alone. But none of it helps..!!

Any help is really Appreciated. !!