每30秒或在用户提交表单时重新加载页面

Question

我有一个PHP页面，其中包含很多内容，这些内容构成了视频网站页面的各个部分。

我有一个注释部分，它将信息提交到数据库中（哪个工作正常）。 但是我需要这样做，以便在完成此操作时仅刷新包含的页面/ div。

这是PHP：

<form id="song-comment-form">
    <input type="hidden" value="<?=$rSong->id?>" class="song-id">
    <textarea class="editor" id="song-comment-textarea"></textarea><br>
    <input type="submit" value="Submit"><input type="button" value="Cancel" id="hide-song-comment-form">
    <hr>
</form>
<div id="player-song-comments">
    <?php $showComments?>
</div>

这是我尝试使用Javascript进行的尝试：

<script>

var $comments = $("#player-song-comments");
setInterval(function () {
    $comments.load("/template/sections/player_comments.php #player-song-comments");
}, 30000);

</script>

这应该仅重新加载注释部分，但是从现在开始，所有内容都变为空白。

现在按提交时的外观：

当我手动重新加载该页面时：

我不希望整个页面刷新，因为它包含视频。

我怎样才能使提交后或每30秒刷新一次？

更新：我尝试使用JQuery执行此操作。 我收到一个错误：

致命错误：在第42行的/home/content/58/12052758/html/template/sections/header.php中的非对象上调用成员函数query（）

    <script> 
        /*wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#song-comment-form').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); */   //THIS IS LINE 42
        $(document).ready(function() { 
        var options = {
            url: 'template/sections/player_comments',
            target: '#player-song-comments', // target element(s) to be updated with server response
            type: 'post' // 'get' or 'post', override for form's 'method' attribute
        }; 

    // bind form using 'ajaxForm' 
    $('#song-comment-form').ajaxForm(options); 
            $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#song-comment-form').ajaxForm(function() { 
                $("#player-song-comments").load('template/sections/player_comments.php');
                alert("Thank you for your comment! The site is currently in maintenance and the comment won't show until you revisit this video"); 
            }); 
        }); 
}); 
    </script> 

对于那些感兴趣。 这是整个页面： http : //pastebin.com/c0kQ3tGp

Answer 1

您似乎在PHP中加载了注释，据我所知，PHP仅被解析了一次。

我知道最简单的解决方法是使用要刷新的iframe，但是我不确定这是否是一个好习惯。

Answer 2

因此，您的问题分为两部分：

我怎样才能使提交后刷新

您可以使用jquery-form 。 在您的情况下，您可以将表单初始化为以下形式：

$(document).ready(function() { 
    var options = {
        url: 'your_form_action',
        target: '#player-song-comments', // target element(s) to be updated with server response
        type: 'post' // 'get' or 'post', override for form's 'method' attribute
    }; 

    // bind form using 'ajaxForm' 
    $('#song-comment-form').ajaxForm(options); 
}); 

您可以使用许多其他选项 。

还是每30秒？

尝试改变你的

$comments.load("/template/sections/player_comments.php #player-song-comments");

至

$comments.load("/template/sections/player_comments.php"); // remove the selector

根据docs ，选择器用于插入远程文档的片段。 换句话说，当执行load时，jQuery解析返回的文档以查找元素#player-song-comments 。 该元素及其内容将插入带有ID结果的元素中，而其余的检索文档将被丢弃。...我假设#player-song-comments不是您的响应的一部分？