+ Start a Discussion
shweta kumari 25shweta kumari 25 

refresh parent visualforce page when child popup visualforce page is saved

Hello all
This is an very urgent requirement.

I have a parent visualforce page called Med which has 4 fields say approver_1 , approver_2 , approver_3 and approver_4 which is lookup to user.

I have a button which opens a visualforce page as a popup.

The code for the popup visualforce page is as follows:

vf page:
=======
<apex:page standardController="MedConnect__FDA_3500A_MedWatch_Report__c" extensions="VY_InitiateApprovalProcess_Controller" lightningStylesheets="true">
<apex:includeScript value="{!$Resource.MedConnect__jquery}" />
    <apex:includeScript value="{!URLFOR($Resource.MedConnect__jquery_ui,'jquery-ui-1.10.3/ui/minified/jquery-ui.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.MedConnect__jquery_ui,'jquery-ui-1.10.3/themes/base/jquery-ui.css')}"/>
<apex:form >
<apex:pageBlock mode="edit">
<apex:pageBlockSection title="Approvers" id="ApproversId">
    <apex:inputField Id="appId1" html-placeholder="Search People..." value="{!Approver.VY_Approver1__c}" />
    <apex:inputField Id="appId2" html-placeholder="Search People..." value="{!Approver.VY_Approver2__c}" />
    </apex:pageBlockSection>
    <apex:pageBlockSection >
    <apex:inputField Id="appId3" html-placeholder="Search People..." value="{!Approver.VY_Approver3__c}" />
    <apex:inputField Id="appId4" html-placeholder="Search People..." value="{!Approver.VY_Approver4__c}" />
    </apex:pageBlockSection>
    <apex:pageBlockButtons location="bottom" html-align="right">
    <button class="btn" onclick="window.open('/{!$CurrentPage.parameters.id}', target='_self');return false;">Cancel</button>
     <apex:commandButton action="{!customSave}" value="Save" onClick="Window.Close()" onomplete="window.top.location.reload()"/>
     
    </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>
    <script language="JavaScript" type="text/javascript">
function CloseAndRefresh(){
window.opener.location.href="/{!$CurrentPage.parameters.ID}";
      self.close();
  }
</script>
</apex:page>

apex controller of poup page
======================
public with sharing class VY_InitiateApprovalProcess_Controller
{
    public id ReportIds;
    public MedConnect__FDA_3500A_MedWatch_Report__c Approver { get; set; }
   
    public VY_InitiateApprovalProcess_Controller(ApexPages.StandardController controller) {
        ReportIds = ApexPages.CurrentPage().getParameters().get('id');
        this.Approver = (MedConnect__FDA_3500A_MedWatch_Report__c)controller.getRecord();
        Approver =[SELECT Id,VY_Approver1__c,VY_Approver2__c,VY_Approver3__c,VY_Approver4__c
                            FROM
                            MedConnect__FDA_3500A_MedWatch_Report__c WHERE Id =:ReportIds];
    }
    public VY_InitiateApprovalProcess_Controller()
    {
        Approver = new MedConnect__FDA_3500A_MedWatch_Report__c();
    }
   
    public PageReference customSave()
    {
        PageReference pr;
        try{
            database.upsert(Approver);
            //closeWindow = true;
            pr = new PageReference('/'+Approver.Id );
        }catch( Exception e ){
            ApexPages.addMessages(e);
        }
        return Null;       
    }
   
}  

Once I hit the save button then it should close and the parent visualforce page should refresh showing the field values.

Also when I click cancel, then the popup page should close.

I am not able to get this straight.

Please respond with earliest and eloborate.

thanks
shweta

 
Ayush TripathiAyush Tripathi
Hi sweta,
You have to use the concept of rerender and rendered in this.

Please refer the below code 
 
<apex:page Controller="Test">
    <style>
     .custPopup{
            background-color: white;
            overflow: auto;
            border-bottom-width: 5px;
            border-top-width: 5px;
            border-left-width: 5px;
            border-right-width: 5px;
            border-color: #999;
            border-style: solid;
            width:50%;
            height: 80%;
            z-index: 9999;
            padding:10px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .popupBackground{
            background-color:black;
            overflow: scroll;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }
    </style>
    <apex:form >
        <apex:outputPanel id = "showParent">
           <apex:outputLabel value = "{!Name}"></apex:outputLabel>
            <apex:commandButton value = "Open PopUp " action = "{!openPopup}"/>
            <apex:outputPanel id="displayConfirmEditArtwork">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup}"/>
                <apex:outputPanel styleClass="custPopup" style="height: 28%;width:43%;max-height: 32%;overflow-y: scroll;" layout="block" rendered="{!displayPopup}">
                   <apex:commandButton value = "render parent" action = "{!renderParent}" rerender = "showParent"/>
                </apex:outputPanel>
            </apex:outputPanel> 
        </apex:outputPanel>
    </apex:form>
</apex:page>
 
public class Test{
    public string Name{get; set;}
    public Boolean displayPopup {get;set;}

    public Test(){
        Name = 'Originat Test';
    }
    public void renderParent(){
        Name =  'Rendered Test';
        displayPopup = False;
    }
    public void closePopup(){
        displayPopup = False;
    }
    
    public void openPopup(){
        displayPopup = True;
    }
}

Please mark this thread closed if this solves your problem.
Thank you