asked on

javascript close popup and refresh parent page

I have a javascrip function which opens a popup window. The popup is a form to insert new record in database. When form is submitted, I need that window to close and its parent window to refresh with the id on one control from the popup.
I can get the popup to open, but need the script to close and refresh with ID, like stated above.
Here is my code so far:
<SCRIPT language=JavaScript type=text/javascript>

</SCRIPT>

and a link to open script:
<A HREF="JavaScript: addclient()">Click here</A>

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

imitchie

try in the onsubmit code

' get id as newid
opener.location.href = "viewsingle.aspx?id=" + newid;

before the
window.close();

nschafer

I assume that the main page has the ID in the querystring, since you want to refresh the page with it. If you just want to fill in a field on the main page then you don't need to refresh. So here goes.

Here's an example of a popup window with a single input box and a button that will close the pop-up box and refresh the page with the querystring set to the value of the textbox.
The basic difference between this and the previous response is that this will update the querystring of the main page.

Hope this helps,
Neal
-----------------------------------------------------------
<html>
<head>
<title>Test Popup Page</title>
<script type="text/javascript">
function closepage() {
opener.location = "main.htm?id=" + document.getElementById('id').value;
window.close();
}
</script>
</head>
<body>
<input type="text" name="id" value="id" />
<input type="button" onclick="closepage();" value="ok" />
</body>
</html>
-----------------------------------------------------------

nschafer

imitchie beat me too it... :)

mlg101

ASKER

Thank you both for your responses. I'm not sure where to put the code you are saying. On the popup page? If so where exactly.

mlg101

ASKER

OK, i'm catching up with these posts. So I dont need to refresh the page. I just need to inter a single value in a textbox. How do I do that?

Zvonko

Like this:

<script>opener.document.forms[0].yourFieldName.value=42;window.close();</script>

mlg101

ASKER

Ok, I tried Zvonko's last idea and it didn't work at all, although his first post did, along with the help of nschafer. But it still does not input the code into the textbox. I havent tried imitchie, you idea alone with nschafer, but I will later tonight.
Here is what I have: and it closes the window, but does not enter the value:

<script type="text/javascript">
function closepage() {
opener.location.reload(true);window.close();

I'm still not clear on how to get the value to the parent page, without refreshing the page.
}
</script>

nschafer

Basically the idea is that the popup page sees the parent page as an object ("opener"). So we can access all of the elements of the main page and set them from the pop-up page. So let's say the field you want to update on the main page has an id of "text1" for example:
<input type="text" id="text1" name="text1" />

We can access that element's value from the pop-up page like this:
opener.getElementById("text1").value = "my new value";

This immediately updates the field on the main page to have a value of "my new value". I know this differs a bit from the method Zvonko used. Both are valid. Elements may be accessed by their name or their id. To access it by name, you first must specify it's parent. As Zvonko was showing. Here's how his works:

Opener.forms[0].yourfieldname.value
Opener is an object - The Main page in this case
forms is a collection of forms in the object Opener
forms[0] references the first form in the forms collection
yourfieldname - references the field specified in the forms[0] (by name, not ID)
value - is the value of the specified field.

Opener.getElementByID("text1").value
Opener is an object - The Main page in this case
getElementById("text1") - references the text field directly without referencing the form.
value - the value of the "text1" field

As I said either is acceptable. The first assumes that your field is in a form (generally a fairly safe assumption). The second assumes that you have given the field an ID (which you really should in any case, and by the way the ID and name should be the same).

So Now all you have to do is access the data on the pop-up page and substitute it into the value = part of the code above. You do this the same way, but instead of using the opener object you will use the document object. The document object is the reference to the current page or in this case the pop-up's document.
So lets say your pop-up has fields like color, make, and year with the id's for these fields being the same and we want to put these values into the form on the main page. The code might look like this:

function closepage() {
opener.getElementById("color").value = document.getElementById("color").value;
opener.getElementById("make").value = document.getElementById("make").value;
opener.getElementById("year").value = document.getElementByID('year").value;
window.close();
}

I hope this makes sense and describes the process fully.

Neal.

nschafer

As I was typing up my last post I realized I might have misunderstood your original question. Your pop-up is adding a record to the database presumably via a server-side page. So your pop-up has a form which submits to either itself or another page which adds a record to the database. Do you need to get a unique ID from the database to add into the main page? Is the field you are updating on the main page a drop-down? If so we can still accomplish all of this without refreshing the main page (losing any data the user has already input), but the process is slightly different as a drop-down doesn't have a single value, rather we have to add an option to the drop-down and make it the selected option. Also, we need to get the unique ID from the database. Not a problem, but we would need to know the server-side language and database type.

Perhaps I'm off base on this one, but re-reading the question made me think I might have been going the wrong direction earlier

Neal.

mlg101

ASKER

your last post was assuming correctly. I am inputting several values into a form and I getting the unique ID of a record. That is what is populating a Dropdownlist on the parent page. Sorry, maybe I should have been more clear, but I thought a general questions would allow me to figure it out.

I do have the unique ID by @Identity = SCOPE_IDENTITY(). So when the form on the popup is submitted (using button_click event) the form is submitted to database and @Identity is outputted as string

I'm going to work on what you have stated above, but let me know if there is anything else I need to know for dropdownlist, like you were saying.

Thanks

mlg101

ASKER

The only thing that closes the window is if I use Zvonko's example as below. The only problem is that it refreshes the parent page and does not populate my dropdown. Nschafer, for some reason, the popup does not close with your example, eventhough it has the window.close() just the same.

<script type="text/javascript">
function closepage() {
opener.location.reload(true);window.close();
}
</script>

mlg101

ASKER

I'm going to give credit, because Zvonko answered my question directly and accurately. Eventhough the other posts were more on target to what I really need. But I will start a new thread for that question.