Developer Desk Developer Desk - 17 days ago 7
jQuery Question

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>


Answer

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