When i click on "Ok" button which calls btnSave() and the error appears, my HTML component is getting removed and i am not able to perform my operation in <apex:outputPanel id="test">.

VF page:

<apex:includeScript value="{!URLFOR($Resource.PhysicianTerritory, 'jquery.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.PhysicianTerritory, 'bootstrap.min.js')}"/>


function backToCase() {
    if ((typeof sforce != 'undefined') && (sforce != null) ) {
        // in SF1
        // navigate to the page
    } else {
        // not in Salesforce1
        console.log("here we're in \'standard\' SF");
        console.log('case id is: {!Opportunity.id}');
    return false;

function findTotal(){
    var arr = document.getElementsByClassName('amount');
    var tot=0;
    for(var i=0;i<arr.length;i++){
            tot += parseInt(arr[i].value);
    document.getElementById("amountcal").innerHTML = tot;


<apex:form styleclass="form-inline" id="Frm" >
<apex:pageMessages showDetail="false" id="message" />
    <apex:outputPanel >            
        <div id="frmControl">
            <apex:outputPanel id="test">
                if('{!isError}' == 'false'){
                    console.log('Redirecting ' + {!isError});

            <apex:outputPanel id="Op1">
                <apex:commandButton id="Edit" reRender="Op2, Op1" value="Edit" action="{!btnEdit}" rendered="{!NOT(isEdit)}" styleClass="btn btn-primary"/>
                <apex:commandButton id="Save" value="Save" action="{!showPopup}" oncomplete="findTotal();" styleClass="btn btn-primary" rendered="{!isEdit}" reRender="popup,test"/>
                <apex:commandButton id="Cancel" value="Cancel" action="{!btnkcancel}" oncomplete="backToCase();" styleClass="btn btn-primary" rendered="{!isEdit}"/>                    

                <apex:dataTable value="{!revenueScheduleFromOpptyList}" var="rev" width="100%" rendered="{!NOT(isEdit)}" styleClass="table table-responsive table-bordered table table-hover">
                    <apex:column headerValue="Name">
                        <apex:outputLink value="/{!rev.Id}" target="_blank" style="color:#6699FF" >{!rev.Name}</apex:outputLink>
                    <apex:column headerValue="Scheduled Revenue" value="{!rev.Revenue__c}"/>
                    <apex:column headerValue="Scheduled Date" value="{!rev.Month__c}"/>

            <apex:outputPanel id="Op2">                                     
                <apex:dataTable value="{!revenueScheduleFromOpptyList}" var="rev1" width="100%" rendered="{!isEdit}" styleClass="table table-responsive table-bordered table table-hover">
                    <apex:column headerValue="Name">
                        <apex:outputField value="{!rev1.Name}" id="name" styleClass="form-control"/> 
                    <apex:column headerValue="Scheduled Revenue">
                        <apex:inputText value="{!rev1.Revenue__c}" id="revenue" styleClass="form-control amount"/> 
                    <apex:column headerValue="Scheduled Date">
                        <apex:outputField value="{!rev1.Month__c}" id="date" styleClass="form-control"/> 

            <apex:outputPanel id="popup" rendered="true">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                    Current Opportunity Amount is : &nbsp;<apex:outputText value="{!Opportunity.Amount}"/><br/>
                    New Opportunity Amount will be : &nbsp;<span id="amountcal"/><br/>
                    Are you sure to change the amount?
                    <apex:commandButton id="ok" value="Ok" action="{!btnSave}" reRender="popup,test,message" styleClass="btn btn-primary"/>
                    <apex:commandButton id="Cance1l" value="Cancel" action="{!closePopup}" styleClass="btn btn-primary"/>


<style type="text/css">
    #frmControl input{
        margin : 0 0.3em;
        background-color: white;
        border-width: 2px;
        border-style: solid;
        z-index: 9999;
        left: 50%;
        position: absolute;
        /* These are the 3 css properties you will need to change so the popup 
        displays in the center of the screen. First set the width. Then set 
        margin-left to negative half of what the width is. You can add 
        the height property for a fixed size pop up if you want.*/
        width: 500px;
        margin-left: -250px;
        opacity: 0.20;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;



// Edit Method public void btnEdit(){ isEdit = true; }

// Save Method
public void btnSave(){        
    isError = false;
        for(Schedule__c rv: revenueScheduleFromOpptyList){
        isEdit = false;
        if(upsertRevenueScheduleSet.Size() >0){
        if(!upsertRevenueScheduleList.isEmpty() && upsertRevenueScheduleList != null){
            upsert upsertRevenueScheduleList;
    catch(exception e){
        ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Please Contact System Administrator.');
        isError = true;

// Cancel Method
public PageReference btnkcancel()
    return null; 
public void closePopup(){  
    displayPopup = false;       
public void showPopup(){ 
    displayPopup = true;  

Please help on this issue.

  • Good that you posted the code. But what is really happening, please add more details. Commented Feb 8, 2017 at 10:39
  • Hello on salesforce.stackexchange! Please, specify, which component's deleted. Is it only <apex:outputPanel id="test"> or <div id="frmControl">
    – EvAzi
    Commented Feb 8, 2017 at 10:41
  • Sole purpose of rendered attribute is to conditionally hide element if value passed is false, show if true.
    – Raul
    Commented Feb 8, 2017 at 10:47

2 Answers 2


From your code it seems like you need to set isEdit after an operation is performed successfully.

Suggest you to update your code as:

// Save Method
public void btnSave() {
    // first thing to set it as false, to block editing
    isEdit = false;

    try {

    } catch(exception e) {
        // make inputs editable based on this flag on error
        isEdit = true;
  • Thanks for the comment. It is working somehow for me but i am facing some issue of refreshing the page after i click on btnSave method. In backend data value is getting update. it just my page is not getting refreshed. Can you please help on this. Commented Feb 8, 2017 at 13:01
  • Its difficult to answer here. Please keep on trying and if you are still stuck, maybe post a new question. Also check answer from @Santanu
    – Raul
    Commented Feb 8, 2017 at 13:45

When you are getting an error, you are in the catch block of btnSave function. After adding the page messages, you are calling another function (closePopup) which is making displayPopup to false. And then you are rendering popup outputPanel after the action of Ok button. So when popUp outputPanel is rerendering it find displayPopup variable as false, hence vanishing the content of the pop up.

You should sync your code with your requirement. If you want to keep the content of the pop up after an error, you should remove the function call of closePopup from the catch block.

  • Popup doesn't has any input fields, so I think that might not be a problem?
    – Raul
    Commented Feb 8, 2017 at 10:55
  • Ya but looking at the code it looks like he is rerendering only popup, test, message out of which only popup has legit html content. He is not touching the op1 and op2 which has other html contents. Commented Feb 8, 2017 at 11:00
  • Hi @SantanuHalder, I managed to find the issue solution. It was i was not calling the op1 in rerendering of popup block. Now the issue is when i added op1 in rerendering it is restricting me to refresh my page, it just render my op1 and thats it. Can you please help me on that too. Thanks in advance. Commented Feb 9, 2017 at 9:46

You must log in to answer this question.

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