+ Start a Discussion
RDeepaRDeepa 

How to pass the value from popup window (Child window) to the main VF page (parent window)?

Hi,

 

I have a requirement to develop a lookup search in Visualforce. I am able to show the list of of records in a popup window when the user clicks on a magnifying glass. I am not able to pass the selected value from the popup window to the main VF page (Parent window).

 

Can anyone please suggest me on this?

 

Thanks,

Deepa

Cool_DevloperCool_Devloper

You have to use Modal Windows to hold the context between the two windows.

Please refer below-

Modal Windows

Cool_D

RDeepaRDeepa

Thanks a lot for your suggestion.

 

I am not able to get the exact picture of the suggested solution. I wanted to implement the lookup search for the standard Activities Related To field. This is a combination of picklist and lookup fields. 

 

The way which I tried is, I had a picklist, a text field and a commandLink for the Loopup image. For onclick i gave the lookup VF page url and i passed the selected value from the picklist. As I said, I am not able to pass the selected value from the child window to the parent. How can i use Modal Windows for this case? Can you provide me any sample code if u have any?

 

Thanks,

Deepa

Cool_DevloperCool_Devloper

Hi Deepa,

The point to note over here is that you cannot use a seperate VF page as a pop up in such a case when you want to pass some value from the child window to parent window. Reason being that the conetxt will be reset!

What you have to do is that keep the pop-up window hidden on the same VF page using a DIV tag or an outputPanel and then render it using JavaScript positioning it on the top of your parent window. You can use 3rd party JS libraries to achieve this and YUI is one of them as i posted the link above.

In this way, you will be working within the same context and can easily pass values between the pop-up and the main page!

Hope this helps!!

Cool_D

RDeepaRDeepa

Hi,

 

Is there any javascript function available to pass the value from child window to the parent window? So that, I can prepopulate the value on the page with the component ID.

 

Regards,

Deepa

Cool_DevloperCool_Devloper

Well ... that is exactly why i gave you the link ;)

3rd party JS is nothing but a JS function which will help you position the pop-up on top of the page! Within that pop-up, you can call an action method which will update the field in the backend and then all you need to do is to reRender that particular section on the page so that it shows the updated value from the getter!!

Cool_D

ssssssss

Hi Deepa,

 

I am also facing the same problem.I am implementing the concept of lookups as in salesforce using visulaforce with apex.

i am unable to pass the value from child window to parent window.If u found the solution plz send me the code.

 

Thanks in advance,

manu..

Bhawani SharmaBhawani Sharma

Below works for me:

Parent Page

<apex:page>

    <body>
        <form>
            <input id="details" name="details" />
            <input type="button" name="choice" onClick="window.open('/apex/Popup1','popuppage','width=850,toolbar=1,resizable=1,scrollbars=yes,height=700,top=100,left=100');" value="Open popup" />
        </form>
    </body>
</apex:page>

 Child Page

<apex:page>
    <html>
        <head>
        </head>
        <body>
            <SCRIPT LANGUAGE="JavaScript">
                function sendValue (s){
                    var selvalue = s.value;
                    alert(window.opener);
                    window.opener.document.getElementById('details').value = selvalue;
                    window.close();
                }
            </script>
        
            <form name="selectform">
                <input name="details" value=""/>
                <input type="button" value="Copy input to parent opener" onClick="sendValue(this.form.details);" />
            </form>
         
        </body>
    </html>
</apex:page>

 

Deepali KulshresthaDeepali Kulshrestha
Hi,
 
Try the below code
Parent window
-------------
<apex:page id="SearchAccount" showHeader="false" sidebar="false">
    
    <script>
    var newWin = null;
    
    function openLookupPopup(field) {
        var url = "/apex/Child_Lookup_Page?fieldId="+field;
        newpage = window.open(url, 'Popup', 'height=500,width=600,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
        if (window.focus) {
            newpage.focus();
        }
        return false;
    }
    </script>
    <apex:form > 
        <apex:pageBlock title="My custom page">
        <apex:outputPanel >
            <apex:inputText id="accnameId"/>
            <apex:commandButton value="Lookup" onclick="openLookupPopup('{!$Component.accnameId}');"/>
        </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
</apex:page>
---------------
Child window
---------------
<apex:page controller="AccountLookupController" sidebar="false" showHeader="false">
    
    <script>
    function populateValue(setValue)
    {
        var parent = window.opener.document;
        var targetField = parent.getElementById('{!$CurrentPage.parameters.fieldId}');
        targetField.value = setValue;
        self.close();
    }
    </script>
    
    <apex:form >
        <apex:pageBlock title="Lookup Page">
            Enter Account Name to search:&nbsp;&nbsp;<apex:inputText value="{!accSearch}"/>                 
            <apex:commandButton action="{!search}" value="Search" reRender="tableData" />
        </apex:pageBlock>
        <apex:pageBlock title="Searched Results">
            <apex:dataTable value="{!lstAccount}" var="acc" Id="tableData" border="1" cellpadding="10" style="margin:50px;">
                <tr>
                    <td style="text-align:center;">
                        <apex:column headerValue="Account Name:">
                            <apex:outputLink value="#" onclick="populateValue('{!acc.Name}')">{!acc.Name}</apex:outputLink>
                        </apex:column>
                    </td>
                </tr>
            </apex:dataTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
--------------------
Controller class
--------------------
public class AccountLookupController {

    public List <account> lstAccount {get;set;}  
    public string accSearch {get;set;}  
    public AccountLookupController() { 
        lstAccount=[select Id,Name from Account limit 100];
    }  
    public void search(){  
        lstAccount=[select Id,Name from Account where Name like :accSearch+'%' ];       
    }
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com