Как обновить родительскую страницу после закрытия всплывающего окна в javascript?
У меня есть одна страница list.jsp
имея список всех записей в таблице и одну кнопку сверху, чтобы добавить новую запись.
Я хочу открыть add.jsp
как всплывающее окно. Это работает, но когда я закрываю всплывающее окно, как обновить 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>
2 ответа
Как из моего комментария от другого ответа, вам просто нужно обработать window.onunload
событие и использовать window.opener
свойство сообщать вызывающей странице о необходимости обновления.
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>
Вы могли бы использовать location.reload(true)
перезагрузить текущий документ. forceGet
параметр по умолчанию false
и именно поэтому вы передаете его как true
переписать это. В основном он используется для получения документа с сервера, а не для загрузки его из кэша.
EDIT1: если вы пытаетесь перезагрузить исходное окно всплывающего окна, как указано в комментариях escaparello, вы должны позвонить window.opener.location.reload()
, Кроме того, вы можете привязать прослушиватель событий при выгрузке всплывающего окна следующим образом:
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();
}