Solved

javascript close popup and refresh parent page

Posted on 2007-11-13
13
12,525 Views
Last Modified: 2012-06-27
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>
<!-- Begin
function addclient() {
 var winleft = (screen.width - 600) / 2;
 var wintop = (screen.height - 300) / 2;
 win=window.open('addclient.aspx', 'AddClient','top='+wintop+',left='+winleft+',scrollbars= 1,resizable= 1,width=600,height=300');  
}
// End -->
</SCRIPT>

and a link to open script:
<A HREF="JavaScript: addclient()">Click here</A>
0
Comment
Question by:mlg101
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
Comment Utility
When the popup for is submitted then it does send a Response to the popup window page.
If you send this line as Response then you get the reload of parent page and close of popup:

<script>opener.location.reload(true);window.close();</script>



0
 
LVL 25

Expert Comment

by:imitchie
Comment Utility
try in the onsubmit code

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

before the
window.close();
0
 
LVL 19

Expert Comment

by:nschafer
Comment Utility
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>
-----------------------------------------------------------
0
 
LVL 19

Expert Comment

by:nschafer
Comment Utility
imitchie beat me too it... :)
0
 
LVL 1

Author Comment

by:mlg101
Comment Utility
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.
0
 
LVL 1

Author Comment

by:mlg101
Comment Utility
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?
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Like this:


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



0
 
LVL 1

Author Comment

by:mlg101
Comment Utility
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>
0
 
LVL 19

Expert Comment

by:nschafer
Comment Utility
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.
0
 
LVL 19

Expert Comment

by:nschafer
Comment Utility
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.
0
 
LVL 1

Author Comment

by:mlg101
Comment Utility
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
0
 
LVL 1

Author Comment

by:mlg101
Comment Utility
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>
0
 
LVL 1

Author Closing Comment

by:mlg101
Comment Utility
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.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now