AJAX代码突然停止工作

Question

So I have been making a chat and at 14:09 it was working fine, it displayed messages, received them and stored them in DB. It also displayed stored messages and showed users the messages instantly. However suddenly it just stop showing all the messages. I have checked and the messages are stored in the DB when sent. I dunno what the error is as I've not changed the code to affect it. It would help a lot if you could help me with this! :)

index.php (includes AJAX jQuery & form)

                <div id="messageSend">
                <form action="shout.php" method="post" id="chat">
                <textarea rows="8" cols="74" id="Message" name="Message" placeholder="Post messages here."></textarea> 
                <br/><input type="submit" id="submit" value="Shout!">
                </form>

                    <script>
                        $('#chat').submit(function(e) {  
                            e.preventDefault();  
                                var form = $('#chat'),  
                                url = form.attr('action'),  
                                Message = $('#Message');
                                $.post(url, {Message : Message.val()}, function(data) {  
                                $('#messageDisplay').html(data);  
                                $('#Message').empty().val('');                                    

                        });
                                                    setInterval(function() {
                              // Do something every 2 seconds

                        {
                            $.get("data.php").done(function(data) {
                            $('#messageDisplay').html(data);
                                    });
                                }
                            }, 1000);
                       });

                    </script>

shout.php (send message and adds to DB)

<?php

include 'auth.login.php';
include 'pdo.config.php';

if (!isset($_SESSION['Username'])) {
echo '<br/>';
echo '<center>You need to login to post!<br/>';
header("Refresh:2; URL=index.php");
exit();
}

if (!isset($_POST['Message']) || empty($_POST['Message'])) {
echo '<br/>';
echo '<center>Message box empty!<br/>';
exit();

}

$Username = $_SESSION['Username'];

$Message = htmlspecialchars(trim($_POST['Message']));

$insertMessage = $PDO->prepare("INSERT INTO `chatbox` (User, Message) VALUES (?, ?)");
$insertMessage->bindParam(1, $Username, PDO::PARAM_STR);
$insertMessage->bindParam(2, $Message, PDO::PARAM_STR);
$insertMessage->execute();


?>

data.php (file which has loop to retrieve messages from DB)

<?php

include 'pdo.config.php';

$chat = $PDO->query("SELECT * FROM `chatbox`");

while($getRow = $chat->fetch(PDO::FETCH_ASSOC)) {  
     echo '['.date('d/m/Y g:i:s A',  strtotime($getRow['SentOn'])).'] '.$getRow['User'].': '.stripslashes($getRow['Message']).'<br/>';  
}

?>

Answer 1

Your page data.php is not being called. The contents are these:

[05/09/2013 10:37:31 AM] test: test [05/09/2013 10:37:44 AM] test: test

So, they are being inserted properly; however, when a user clicks "Shout" it does not call the setInterval().

Edit: Your problem is that after they login, the setInterval() isn't called. If you refresh the page after logging in, it will work (works for me).

Try this:

$(document).ready(function() {
    $('#chat').submit(function(e) {  
        e.preventDefault();  
        var form = $('#chat');
        url = form.attr('action'); 
        Message = $('#Message');
        $.post(url, {Message : Message.val()}, function(data) {  
            $('#messageDisplay').html(data);  
            $('#Message').empty().val('');                                    
        });

        setInterval(function() {
        // Do something every 2 seconds
            $.get("data.php").done(function(data) {
                $('#messageDisplay').html(data);
            });
        }, 1000);
    });

    <?php if (isset($_SESSION['Username'])) { ?>
        setInterval(function() {
        // Do something every 2 seconds
            $.get("data.php").done(function(data) {
                $('#messageDisplay').html(data);
            });
        }, 1000);
    <?php } ?>
});