Passing values from popup window to parent page can get tricky sometimes, especially if you are attempting to do heavy duty stuff in the popup window. The best way to do this is to create hidden variables on the parent page, and populate these from the popup window with whatever values need to be passed to the parent. As usual, let us take an example. Suppose we have the following requirement : 1. Create an .aspx page, that opens a popup window on a button click. 2. The popup window that opens up should have a user information form that collects UserName, Address, Phone No. 3. Upon filling up the details, the user shall click a button that closes the window and passes the information to the main page. 4. The user information from the popup window should be displayed on the main page now. So basically, we need to pass values from the popup window to the parent page. Let us look at the parent page code first :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> function openWindow() { window.open('/website3/testpage.aspx', null, 'height=200,width=400,status=yes,toolbar=no,menubar=no,location=no'); return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" runat="server" onclick="openWindow();" value="Click Me" /> <b>Information from the popup window :</b> <br /> <label> UserName : </label> <label id="lblUName"> </label> <br /> <label> Address : </label> <label id="lblAddress"> </label> <br /> <label> Phone no : </label> <label id="lblPhone"> </label> </div> </form> </body> </htmlRun the page and click on the button to open a popup window that shows the a page TestPage.aspx. This is the aspx page for our popup window. As per the requirements, this should have some data entry fields in which the user can enter values, and also a button that closes the window. Upon window close, the user-entered values should be persisted to the main page. Look at the code below :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Popup Window</title> <script language="javascript" type="text/javascript"> function passValues() { ; } </script> </head> <body> <form id="form1" runat="server"> <div> <label> UserName : </label> <input type="text" id="txtUName" /> <br /> <label> Address : </label> <input type="text" id="txtAddress" /> <br /> <label> Phone No. : </label> <input type="text" id="txtPhone" /> <br /> <input type="submit" onclick="passValues(); window.close()" value="Submit" /> </div> </form> </body> </html>Note that we have created the function passValues but have not yet implemented it. Now run the main page, you should see something like this :
So much for laying the groundwork. The tough task now is to propagate the values that the user enters in the popup window, to the parent page. As you can guess, we'll have to first access the popup window's parent window, and once we have the parent window reference, we can get the required elements by doing the following :
[parentWindow Object].document.getElementById('lblUName');
To access an element on the parent window, you can do the following :
window.opener.document.getElementById('lblPhone').innerText = 'xyz';
Look at the code below to get a better idea of what we are talking about :
function passValues()
{
window.opener.document.getElementById('lblUName').innerText = document.getElementById('txtUName').value;
window.opener.document.getElementById('lblAddress').innerText = document.getElementById('txtAddress').value;
window.opener.document.getElementById('lblPhone').innerText = document.getElementById('txtPhone').value;
}
This function grabs the window's parentWindow's document object, and searches for the required elements (lblUName, lblAddress, lblPhone) therein. It assigns these objects the values from the popup window textboxes.
Now to complicate things a little bit further, let us try to access elements of the parent page that are in an iFrame. Here's the (modified) parent page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> . . . . <label> Phone no : </label> <label id="lblPhone"> </label> </div> <iframe src="HTMLPage.htm" width="400px" height="200px"></iframe> </form>Confused ? Review the screenshot below to jog your memory :
Our goal here is this :
-- When the user clicks the Submit button on the popup window, the UserName, Address and Phone no. fields should be displayed on the parent page. In addition to that, the UserName should also be propagated to the iFrame's page's [lblPopupValue] label control. To achieve this, we would have to access the [frames] collection of the parent window object. To cut a long story short, here's the magical line of code :
window.opener.frames(0).document.getElementById('lblPopupValue').innerText = 'blah blah';
Pardon the blah blah. Here's the complete code :
function passValues()
{
window.opener.document.getElementById('lblUName').innerText = document.getElementById('txtUName').value;
window.opener.document.getElementById('lblAddress').innerText = document.getElementById('txtAddress').value;
window.opener.document.getElementById('lblPhone').innerText = document.getElementById('txtPhone').value;
window.opener.frames(0).document.getElementById('lblPopupValue').innerText = document.getElementById('txtUName').value;
}
`
And that's it. To summarize, we've successfully opened / closed a popup window, passed values to the parent window, and passed values to an iFrame embedded in the parent window.
10 comments:
Hi,
This is a good Article. Can you let me know if we can popup windows in winforms or we have to make new forms in our project
Is there a way to get this to work with using ASP Controls like the ASp:Label or ASP:TEXTBOX
HI, In order to implement this code in the SP Control....create a page in the Visual Studio with textbox and button. and put the Javascript same as in this example....I did and it worked fine to me.
I would like to know how to freese the parent window when a child window is open and contol goes back to parent when child submit button is pressed. The whole idea is to open just one child window at a time only.
cannot pass values to parent window in mozilla
hi ,
I need to pass int array from user control which is on parent page , and it has a button which opens another asp.net page , using winodw.open.
Is it possible to pass int array to another page without using session?
please help
hi swati
can you help me.
i do a project in this project i use grid view control now i need to add a new row to grid and edit, update and delete from grid.
note: without choose data source to grid view control
(vs2008,c#)
by
thiru
Thanks a lot..its working fine..but I am facing a problem..my parent window controls get updated with the values from my pop-up window only on the second button(pop-up window button) click..not the first time.
Can u pls help me resolve this?
Thanks
Smitha
Try to use innerHTML instead of InnerText.
try to use InnerHTML instead of InnerText
This code doesn't work with Firefox. any fix for that???
Post a Comment