How to refresh parent page after closing popup window in javascript?

Question

I have one page list.jsp having list of all records in table and one button at top to add new record.

I want to open add.jsp as a popup window. This works but when I close popup window how to update list.jsp so that it shows newly added record

Here is my code what i tried...

list.jsp

<html>
<head>
<script>
   function popupwindow(url, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
    popupWindow =  window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
     return popupWindow
   } 
</script>
</head>
<body>
<input type="button" value="Add new" id="add-btn" onclick="popupwindow('Addnew.jsp','Add new',600,400)"/>  
<table>   
  // Here i am showing all records from database...
</table>
</body>

add.jsp

     <html>
     <head>
     <script type="text/javascript">
     $(document).ready(function(){

        $("#savebtn").click(function(e) {
        $.ajax({
                    type: "POST",
                    url: "RecordHandler",
                    data: dataString,
                    success: function(data){ 
                        $('body').html(data);
                        $('#msg').html('New Record Added Successfully.')
                    }
                }); 
       });

      </head>
      <body>
      <form method="POST">
      <table>              
      <tr>
       <td>Folder Number</td>
       <td><input type="text" name="folderno"/></td>
     </tr>
     <tr>
        <td>Box Number <b style="color:red">*</b></td>
       <td><input type="text" name="boxno"/></td>
    </tr>
    <tr>
     <td colspan=2>
      <input type="submit" value="Save" name="save" id="savebtn"/>
    </td>
  </tr>
   </table> 
 </form>

see this answer http://stackoverflow.com/questions/10792408/open-popup-and-refresh-parent-page-on-close-popup — Squirrel5853, Sep 26 '13 at 12:22

vladzam · Answer 1 · 2013-09-26T12:32:21.497

7

You could use location.reload(true) to reload the current document. The forceGet parameter is by default false and that is why you pass it in as true to overwrite it. Basically it is used to fetch the document from the server, instead of loading it from the cache.

EDIT1: If you are trying to reload the source window of the popup, as escaparello mentioned in the comments, you should call window.opener.location.reload(). Also, you could bind an event listener for when the popup unloads, as follows:

popupWindow.onunload = function () {
    // This informs the user that the record has been added successfully
    alert('The record has been inserted into the database!');

    window.opener.location.reload();
}

edited Sep 26 '13 at 12:32

answered Sep 26 '13 at 12:17

vladzam

5,462
6
30
36

I think that the main problem is "how to find out that the popup was closed" rather than "how to reload page" – Kamil T Sep 26 '13 at 12:18
1

also anyone wanting to use location.reload() should check this http://stackoverflow.com/questions/2405117/difference-between-window-location-href-window-location-href-and-window-location – Squirrel5853 Sep 26 '13 at 12:22
4

It should be `window.opener.location.reload(true);` if you are calling it from the pop up window. – epascarello Sep 26 '13 at 12:27

Squirrel5853 · Accepted Answer · 2015-09-14T09:53:33.500

As from my comment from the other answer you just need to handle the window.onunload event and use the window.opener property to tell the calling page to be refreshed.

2.add.jsp

<html>
<head>
    <script type="text/javascript">

        //ADDED START
        window.onunload = refreshParent;
        function refreshParent() {
            window.opener.location.reload();
        }
        //ADDED END

        $(document).ready(function(){
            $("#savebtn").click(function(e) {
                $.ajax({
                    type: "POST",
                    url: "RecordHandler",
                    data: dataString,
                    success: function(data){ 
                         $('body').html(data);
                         $('#msg').html('New Record Added Successfully.');
                         window.timeout(CloseMe, 1000); <-- not sure on the syntax 
                         but have a timeout which triggers an event 
                        to close the form once a success has been handled. 
                        Probably should do something incase of an error.
                    }
                });

                return false; <-- this should stop the window from unloading. 
            });

         function CloseMe()
         {
             window.opener.location.reload();
             window.close();
         }
   </head>

but it does not shows 'New Record Added Successfully.' msg...how would user know that record added successfully? — Developer Desk, Sep 26 '13 at 12:31
witin the `click function` you have declared for the `savebtn` you could `return false`. and then have another `function` which gets triggered within the `success` which closes the form. So then it waits for a success before closing — Squirrel5853, Sep 26 '13 at 12:36
have updated my answer to try and demonstrate what I attempted to descibe above — Squirrel5853, Sep 26 '13 at 12:41

How to refresh parent page after closing popup window in javascript?

2 Answers2

Linked