View Pop Up Data

Question

I am trying to achieve the following.

1. An icon on a parent page will open a new child pop-up.
2. In the child pop-up, the user selects a value from the picklist and clicks add. When the user clicks add it gets populated in the table below. The user can add multiple records. The user then clicks Close to close the pop up. Now if the user clicks on the icon again, it should display the values already selected by the user in the child pop- up.

How can I achieve this i.e. displaying the recently added data on reopening of the pop up ? Any help would be appreciated. Here is my code:

Parent page:

    <apex:page>
    <script>
    function openPopup()
     {
        var url="/apex/AddLanguage";    
        popupWindow=window.open(url, 'Popup','height=700,width=850,left=100,top=100,scrollbars=no,toolbar=no,status=no, resizable=no');
        if (window.focus) 
        {
           popupWindow.focus();
        }

        return false;
     }

     function closePopUp()
        {
           if (null!=popupWindow)
           {
              popupWindow.close();
           }  
        }
    </script>

    <apex:outputLink id="addLanguage" onclick="openPopup(); return false;">
      <apex:image url="SomeIcon"/>
    </apex:outputLink>
    </apex:page>

Child Pop Up:

<apex:page controller="AddLanguageController">
<script>
var popup=window.parent.opener;
    function ClosePopUpWindow()
    {

      if (null!=popup)
      {
         popup.closePopUp();

      }
      return false;      
   }  
</script>
    <apex:form >
        Language Known: <apex:inputText value="{!LanguageKnown}" />
        <apex:commandButton value="Add" action="{!Add}"/>
        <table border="0">    
            <tr>
            <td><b>Language</b></td>
            <td><b> Created Date</b> </td>
            </tr>
            <apex:repeat value="{!data}" var="dt">
                <tr>
                    <td> <apex:outputText value="{!dt.Language}"/></td>
                    <td> <apex:outputText value="{!dt.DateCreated}"/></td>
                </tr>
            </apex:repeat>
        </table>

<apex:commandButton id="btnClose" immediate="true" value="Close"  onClick="ClosePopUpWindow();"/>
    </apex:form>
</apex:page>

Answer 1

There are potentially many answers to this question, ultimately you are going to need to persist your information between the two pages, probably storing it somewhere on the parent (or even in a more permanent way depending on your use case).

One thing you could try is the HTML5 window.postMessage to send data between the two pages. Note, this will work if your parent page is not going to be refreshed (thus losing the client side state).

I did a little proof of concept to illustrate:

The Parent page opens the child page and listens for messages passed back from the child page. I've used a visible input box to store the data, but you could just as easy hide it in a hidden text box:

<apex:page sidebar="false" >

    <input type="button" onclick="openPopup()" value="Open Popup"/>
    <br/>
    Response: <input type="text" id="response"/>

    <script>

        function openPopup() {
            var url="/apex/Child";    
            popupWindow=window.open(url, 'Popup','height=700,width=850,left=100,top=100,scrollbars=no,toolbar=no,status=no, resizable=no');
            return false;
         }

        // listen out or messages from the child
        window.addEventListener('message', function(event) {
            // make sure correct pod here 
            if(event.origin !== 'https://c.eu0.visual.force.com') return;
            document.getElementById('response').value = event.data; 
        }, false);

    </script>
</apex:page>

The Child Page is going to contain your picklist and table, and when it closes it is going to send the data back to the parent page by using the window.postMessage function, sending the data from the relevant element (in this case, its just an input box but could of course be the content of your table):

<apex:page sidebar="false" showHeader="false">
    <div>
        <input type="text" id="response" value="some response"/>
        <input type="button" value="close" onclick="closePopup()"/>
    </div>

    <script>

        var closePopup = function() {
            // post the relevant information back to the parent page
            window.opener.postMessage(document.getElementById('response').value, window.location.origin+'/apex/Parent')
            window.close();
        }

    </script>
</apex:page>