如何在javascript中关闭弹出窗口后刷新父页面？

本文介绍了如何在javascript中关闭弹出窗口后刷新父页面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个页面 list.jsp 包含表格中的所有记录列表以及顶部的一个按钮以添加新记录。

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

我想打开 add.jsp 作为弹出窗口。这有效但当我关闭弹出窗口时如何更新 list.jsp 以便它显示新添加的记录

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

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>

推荐答案

从我对其他答案的评论中你只需要处理 window.onunload 事件并使用 window.opener 告诉刷新呼叫页面的属性。

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>

这篇关于如何在javascript中关闭弹出窗口后刷新父页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

onUnload