Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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...

  1. 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>
    
  2. 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> 
    
like image 321
Developer Desk Avatar asked Dec 11 '22 11:12

Developer Desk


1 Answers

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();
}
like image 183
vladzam Avatar answered Dec 14 '22 01:12

vladzam