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

Question

I have a PHP page with a lot of includes which make up various parts of the page for a video website.

I have a comments section which submits information into a database (Which works fine). But I need to make it so when this is done only the included page/div refreshes.

This is the 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>

Here is my attempt at doing it with Javascript:

<script>

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

</script>

This should reload just the comments section but instead, everything from this point onwards goes blank.

How it looks now when I press submit:

When I reload that page manually:

I don't want the whole page to refresh because it contains a video.

How can I make just that Refresh after submit is pressed OR every 30 seconds?

UPDATE: I have tried using JQuery to execute this. I'm getting an error:

Fatal error: Call to a member function query() on a non-object in /home/content/58/12052758/html/template/sections/header.php on line 42

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

For those interested. Here is the whole page: http://pastebin.com/c0kQ3tGp

Answer 1

You seems to load comments in PHP and as far as I know, PHP is only parsed once.

The simplest workaround I know is to use an iframe that you would refresh, but I'm not sure this is a good practice tho.

Answer 2

So there are two parts to your question:

How can I make just that Refresh after submit is pressed

You can use jquery-form for that. In your case, you can initialize your form to something like this:

$(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); 
}); 

There are many other options you can play with.

OR every 30 seconds?

Try change your

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

to

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

According to the docs , the selector is used to insert fragments of the remote document. In other words, when load was executed, jQuery parses the returned document to find the element #player-song-comments . This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.... I assume #player-song-comments is not part of your response?