Call parent window's javascript function from child window OR passing data from child window to parent window in javascript

                Hi, I was working on small application and I had a requirement as described here. I was creating a page in wjich user can add multiple cotact detail for him. The page has facility for add, delete and edit the contact. I was storing all these information in view state and finally on Save All button adding them to database. Afte the page is completed client has requested that user can have option to select contacts from database also. So I have to open a popup from which user can select multiple contacts and once user click on "Select" button on popup all the selected contacts should be available in grid on main page along with the contacts user has added manually.

               To achieve this I need have added hidden field on parent page and on child page I access that hidden field to set the IDs of selected contacts. Once the selected IDs are available on parent window, I need to postback the page so that I can take all the data for those IDs from database and add it to grid for edit or save.

              I was knowing that I can set "locationhref"  of parent window in child window and then close child window. However this will redirecr the parent page to new location (here new location is same page) but we loose viewstate data. This solution does not work in my case.

             One of my friend (we call him SP (Sehul the PRO) ) suggested me two ways to solve my problem. First, I can call "Click" event of parent window's button in child window so that parent window will post back and the code behind I had written for that button's click had;ler will be executed. Yes this is possible !!   Second, I can call javascript function written on parent window from child window. This function use ajax and execute server side code once I get selected contact IDs in hidden field.  

               Lets implement First logic. Below is the javascript to raise button click event on parent window from child window.

// Set parent window's hidden field value from child window
window.opener.document.getElementById(Client ID of Hidden Field).value = Selected IDs;

// raise button click event of parent window
window.opener.document.getElementById(Client ID Of Button).click();

// Close the child window
close();

Fig - (1) Javascript on child window to raise button click event on parent window

           I had written this script on child page. Tis will raise button click event and in post back I wrote the logic of retrieving data from database for IDs set in hidden field and displayed them in grid.

          Now the second way, call javascript function of parent window from child window.

<script language="Javascript" type="text/javascript">
    function CallAlert()
    {
        alert("This is parent window's alert function.");
    }
</script>

Fig - (2) Javascript on parent window.

<script language="Javascript" type="text/javascript">
    
    function SetParentWindowsHiddenFieldValue()
    {
        window.opener.document.getElementById("HiddenField1").value = document.getElementById("TextBox1").value;
        return false;
    }
    
    function CallParentWindowFunction()
    {
        window.opener.CallAlert();
        return false;
    }
</script>

Fig - (3) Javascript on child window.

          Take two buttons on child window. C all "SetParentWindowsHiddenFieldValue" on click of one button and call "CallParentWindowFunction" on click of second button and see the result.

Happy Programming.