Rerendering nested output panel at onChange event of Selectlist not working

Question

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..!!

And, sometimes this code works properly without any issues in Chrome & Firefox, but not at all working in IE. It acts totally weird.

Any help is really Appreciated. !!

Answer 1

I have looked at your page and have created a controller for this, to test it.

If your SetChangeFlag() changes the isExists property, I get the behaviour that you describe. The checkbox stays checked, yet Panel3 is not rendered.

Make sure that isExists is not changed or re-render the checkbox as well.

If isExists is unchanged in SetChangeFlag(), Panel3 is rendered.

For further assistance the controller code is needed.

Mine:

public class RerenderTestController {
    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 RerenderTestController () {
        this.lstReason = new List<SelectOption>();
        this.lstReason.add(new SelectOption('1', '1'));
        this.lstReason.add(new SelectOption('2','2'));
        this.uhasAccess = true;
        this.isExists = true;
    }

    public void SetChangeFlag() {
        this.isReplacement = true;
        this.isExists = false; // with this, Panel3 is not rendered!
    }
}