How to pass a variable's value of child visualforce page to a variable in parent visualforce using js

Question

I am new to salesforce and I am doing a task to create a new Company by using visualforce page. From visualforce page, I am using <apex:outputLink> to open a popup window with a url like 'apex/page1'. This page has a standard controller that is something like :

<apex:page standardController="Company__c" showHeader="true" sidebar="true">

By clicking outputLink, we got a popupwindow that is on back-end a visualforce page which has a custom controller (apex class) named apexClass1.

From this custom controller, I am using PageReference to make a reference to a page something like :

'/apex/page2?c='+code+'&recordId='+recordId)

This page2 has its own custom controller named as "apexClass2".

Now My problem is that from this apexClass2 class, I want value of a variable to use it into the first page's js portion that is opening a popup window.

How can I do that? Is it possible in salesforce?

Please help.

Now I am posting my code so that you can easily my problem...

<<--------1st Page to create a company------->> var myOpenWindow = function(URL) { var myOpenedWindow = myOpenedWindow || window.open(URL,'window.childWin','height=600,width=600,left=100,top=100,scrollbars=yes,toolbar=no,status=no');; myOpenedWindow.location.href= URL; myOpenedWindow.focus();

            window.intervalId = window.setInterval('window.checkIfChildWindowIsClosed()',1*1000);

            // Here value should retrieve...
             var recID = "How to get Value from 3rd page here"; 

            //add check function to window
            window.checkIfChildWindowIsClosed = function()
            {
                if(myOpenedWindow.closed)
                {
                    window.clearInterval(window.intervalId);
                    window.parent.location.href = 'https://na11.salesforce.com/'+recID;
                }
            }
        }

</script>

Search

Now <<---------- Page 2 -------------->> Enter Name:

            <apex:column value="{!d.name}" headerValue="Name"/>
            <apex:column headerValue="Select">
                <apex:commandButton action="{!QDetail}" value="Go" rerender="hiddenBlock">
                    <apex:param name="code" value="{!d.Code}" assignTo="{!code}"/>
                </apex:commandButton>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>
    <apex:pageBlock id="hiddenBlock" rendered="false"></apex:pageBlock>

</apex:form>

<<------ Controller of Page 1 is ------->>

public class QuandlCntl { public string searchQuery {get; set;} public string updateQuery {get; set;} public string qAPIKey {get; set;}

public List<SearchedDocs> listDocs{get;set;}

public String code {
    get;
    // *** setter is NOT being called ***
    set {
        code = value;
        //System.debug('value: '+value);
    }
}


public QuandlCntl(){
QuandleConnect QuandleCon = new QuandleConnect();
    qAPIKey = QuandleCon.QuandleAPIKey;
    searchQuery = ApexPages.CurrentPage().getparameters().get('cname');
}

// @RemoteAction public void SearchQuandl(){ System.debug(searchQuery); try{
httpReq(searchQuery.replace(' ', '+')); } catch(System.Exception e){ ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Quandle Search Data Failed: please retry')); } }

public PageReference QDetail(){

    integer underScore = code.indexOf('_');

    code = code.substring(underScore+1);
    string recordId = ApexPages.CurrentPage().getparameters().get('recordId');
    PageReference pr = new PageReference('/apex/QuandleStockDetailsVfp?c=' + code+'&recordId='+recordId);
    return pr;
}

}

You can see that from method QDetails, I am referencing to a page that is:

                           <<---- Page 3---->> 

.inlineTables{ display: inline-block; }

            function ClosePopup()
            {
                console.log('Call close popup');

                var recordId = '{!recordId}';  
                var resp = '{!message}';

                alert(rest);
                if(resp == 'success'){
                    setTimeout(function(){ 
                        window.parent.close();
                    }, 100);
                }
            }
        </script>  
    </apex:outputPanel>

<<---------- controller for this page is -------------->> public class QuandlStockDetailsCntl {

public string recordId{get;set;}
public String message {get;set;}




public QuandlStockDetailsCntl(){
    QuandleConnect QuandleCon = new QuandleConnect();
    qAPIKey = QuandleCon.QuandleAPIKey;
    recordId = queryString('recordId');  // This the variable whose value I need on page 1
}

public PageReference saveQuandleData(){ System.debug('record Id:'+ recordId); List MasterListValues = new List(); List Company; Company__c companyObj; //if(recordId == null){ ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, 'Successfully saved data in CRM.')); // }

    Company = [select Address__c, Annual_Revenue__c, Cash_Equivalents__c from Company__c where Id = :recordId];                        

    if(Company.isEmpty()){
        Company__c compny = new Company__c();


        insert compny;
        recordId = compny.Id;  // here value of recordId is changed that is the required value in page 1...

        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, 'Successfully saved data in CRM.')); 
        PageReference pr = new PageReference('/apex/QuandleSuccessRecVF');
        return pr;
    }

}

This is the full scenario. From 3rd apex class, value of variable "recordId" is needed in 1st page...

Any help will be appreciated!

Answer 1

You can use either Window.postMessage to safely transfer data between the popup and the original window; this is the preferred method. Alternatively, you can also set an Apex Cookie that can be shared between the two windows. Using expando properties of window.opener should not be used, because you can't even verify that the receiving page is even the original page which opened the popup; this might cause undesirable behavior.

Answer 2

You can pass the value with parent.window.opener from child window to parent window. I tried with the below example as per your requirement and it is working. Hope this helps.

Parent VF page

<apex:page standardController="Book__c">
    <apex:outputLink title="View detail in a popup window" onclick="return openPopup('{!id}');">Open Page1</apex:outputLink><br/>
    <div id="parentElem">Google</div>
    <script>
        function openPopup(id){
            var newWin=window.open('{!$Page.page1}?id=' + id, 'PopUp','height=450,width=650,left=300,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no,channelmode=yes');
            if (window.focus){
                newWin.focus();
            } 
            return false;
        }
    </script>
</apex:page>

page1

<apex:page controller="apexClass1" sidebar="false" showHeader="false">
    <b>Page 1</b><br/>
    <apex:outputLink value="/apex/page2">Navigate to Page 2</apex:outputLink>   
</apex:page>

ApexClass1

public with sharing class apexClass1 {
    public String id{get;set;}
    public ApexClass1() {

    }
    public PageReference gotoPage2() {
        PageReference pg2 = Page.page2;
        pg2.setRedirect(false);
        return pg2;
    }   
}

page2

<apex:page controller="apexClass2" showHeader="false" sidebar="false" >
    <b>Page 2</b><br/>
    <apex:form>
        <apex:inputText value="{!myName}" label="My Name"/>
        <apex:commandButton value="Pass value to Parent"  onclick="closePopup();"/>
    </apex:form>
    <script>
        var closePopup = function() {
            // post the relevant information back to the parent page
            parent.window.opener.document.getElementById("parentElem").innerHTML = "{!myName}";
            return false;
        }
    </script>   
</apex:page>

apexClass2

public with sharing class apexClass2 {
    public String myName{get;set;}
    public apexClass2() {
        myName = 'ABC XYZ';
    }
}

Answer 3

there are different ways:

1. pass values via javascript variables. i.e. when a button in pop-up is clicked:

   opener.valFromPopup = "{! apexClass2variable }";
   

2. use Custom Setting. Set value of a Custom Setting from APEX2, and then retrieve its value from APEX1. More on Custom Setting