Question

I’m working on a live discussion form. The page loads the threads from MySQL, and refreshes via AJAX every 4 seconds. After the last comment on each thread, there’s a text input for comments (very similar to Facebook).

Everything works fine, except that when the user is writing in the input and the page refreshes, the message disappears. Security and privacy is the main goal on this project, that’s why I don’t want to use cookies. I have tried many solutions, and searched several hours for a solution but nothing seems to work.

1. Is it a possible solution to $_post every time that page refreshes?
2. In case of caching the entered values and retrieving them from $_session or local storage, can anyone suggest a more specific approach? i.e: where to put the listeners 🙂
3. I’ve tried to make a function that prevents reloading the page if the value of the input is different to “”, but even this didn’t work for me.

Here is my refresh code:

<script type="text/javascript">
    var PHP = "msgboard.php";  

    function updateShouts(){
        $('#msgboard').load(PHP);       
    }

    window.setInterval( "updateShouts()", 4000 );
</script>

And here is the main PHP function:

while($row = mysql_fetch_array($resultados)) { 

    echo '<div class="post">
            <div class="user"><b>'.$row["user"].'</b></div>';
    echo '  <div class="txt">'.$row["msg1"].'</div>
          </div>';

        $sql2="SELECT * FROM table WHERE masterid = '".$row['id']."'ORDER BY id ASC";
        $resultados2 = mysql_query($sql2);
        while($row2 = mysql_fetch_array($resultados2)) { 
            echo '<div class="comment">
                    <div class="txt"><b>'.$row2['user'].'</b>';
            echo '  '.$row2['msg1'].'</div>
                  </div>';
        }

    echo '<div class="commentform">
            <form action="board.php" method="post">
            <input type="text" size="75" name="message" id="message1">
            <input type="hidden" name="masterid" value="'.$row['id'].'">
            <input type="submit" name="Submit" value="Enviar"></form>
        </div>' ;
}

Thanks in advance!

Answer 1

As @aziz pointed out in the comments, if you just want to update the comments, you only need to update that part of your page.

Step 1: Add a container to the comments so you can target the update to that container

You will notice there is now a new div <div id="comments_contaner"> in the code which will contain all the comments.

Also when you are outputting HTML, it is easier / more legile to just close the PHP tag and use <?= $variable ?> if you need to place a PHP variable in the HTML.

msgboard.php:

<?
while($post = mysql_fetch_array($resultados))
{
?>
    <div class="post">
        <div class="user"><b><?= $post["user"]?></b></div>
        <div class="txt"><?= $post["msg1"]?></div>
    </div>
    <div id="comments_contaner">
<?
    // This code can be ommited as you can just call updateShouts() upon page load to fetch the comments
    $comments = mysql_query("SELECT * FROM table WHERE masterid = '{$post['id']}' ORDER BY id ASC");
    while($comment = mysql_fetch_array($comments))
    {
?>
        <div class="comment">
            <div class="txt"><b><?= $comment['user'] ?></b> <?= $comment['msg1'] ?></div>
        </div>
<?
    }
?>
    </div>
    <div class="commentform">
        <form action="board.php" method="post">
            <input type="text" size="75" name="message" id="message1">
            <input type="hidden" name="masterid" value="<?= $post['id'] ?>">
            <input type="submit" name="Submit" value="Enviar">
        </form>
    </div>
<?
}
?>

Step 2: Create a PHP function to update the comments

This function will only output the comments, it will need the masterid as a parameter to know which comments to output.

updateComments.php:

<?
    $masterid = $_GET['masterid']
    $comments = mysql_query("SELECT * FROM table WHERE masterid = '{$masterid}' ORDER BY id ASC");
    while($comment = mysql_fetch_array($comments))
    {
?>
        <div class="comment">
            <div class="txt"><b><?= $comment['user'] ?></b> <?= $comment['msg1'] ?></div>
        </div>
<?
    }
?>

Step 3: Call the PHP update function in your script targeting the container div

You will need to pass the $row['id'] as a parameter in the URL

<script type="text/javascript">
    var PHP = "updateComments.php?masterid=<?= $post['id']?>";  

    function updateShouts(){
        $('#comments_contaner').load(PHP);       
    }

    window.setInterval( "updateShouts()", 4000 );
</script>

PD: I have not tested this code, it is just to show you the main idea.

EDIT: Corrected variable names and added comment.