Question

我在使用Javascript重新加载父页面时遇到问题。

当我打开带有表单的弹出窗口并提交它（首次尝试）时，父页面会重新加载但是使用旧数据。

当我再次使用其他值（第二次尝试）执行此操作时，父页面确实显示了数据的更改，但它显示了第一次尝试时的上一个值。

当我第三次尝试并提交第三个值时，父页面会重新加载并显示第二个值。

等等，等等。所以有这种滞后。

更重要的是，这仅适用于Chrome（适用于Mac）。在Safari和Firefox中，表单甚至都没有提交。无论我提交弹出窗口多少次，数据都保持不变。

发生了什么，以及如何解决？

弹出窗口的链接：

<a href="#" onclick="window.open('/add-payment/16','popUpWindow','height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');">550</a>

和弹出窗口本身：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
    function dothesubmit(){
        paymentform=document.getElementById('addpayment');
        paymentform.submit();
        window.opener.location.href="http://localhost:5000/editsupplement/10";
        window.close();
}
</script>    

<form id="addpayment" action="/add-payment/16" method="post">
    <input type="text" class="form-control" name="sum">
    <button type="submit" onclick="dothesubmit();">Save</button>
</form>      

</body>
</html>

Answer 1

您即将重新加载父页面。在重新加载父页面之前，您应该等待表单提交完成。您可以通过ajax提交表单，等待请求完成，然后重新加载父页面并关闭弹出窗口。

$('#addpayment').submit(function(e) {
    e.preventDefault();
    return $.ajax({
      type: "POST",
      url: this.getAttribute('action'),
      data: $(this).serialize(),
      dataType: 'json'
    }).always(function(data){
        window.opener.location.href="http://localhost:5000/editsupplement/10";
        window.close();
    });
})

这是一个小提琴：http://jsfiddle.net/tyb2gy2d/3/

弹出式html页面重新加载具有延迟的父页面

1 个答案: