CODEWITHSUNDEEP
javascriptphpjqueryajax
Oviya Arasu
Oviya Arasu

Reputation: 193

asynchronous commenting on website

I'm trying to create a comment system on my website where the user can comment & see it appear on the page without reloading the page, kind of like how you post a comment on facebook and see it appear right away. I'm having trouble with this however as my implementation shows the comment the user inputs, but then erases the previous comments that were already on the page (as any comments section, I'd want the user to comment and simply add on to the previous comments). Also, when the user comments, the page reloads, and displays the comment in the text box, rather than below the text box where the comments are supposed to be displayed. I've attached the code. Index.php runs the ajax script to perform the asynchronous commenting, and uses the form to get the user input which is dealt with in insert.php. It also prints out the comments stored in a database.

index.php

<script>
$(function() {
    $('#submitButton').click(function(event) {
        event.preventDefault();

     $.ajax({
        type: "GET",
        url: "insert.php",
        data : { field1_name : $('#userInput').val() },
        beforeSend: function(){
        }
        , complete: function(){
        }
        , success: function(html){
            //this will add the new comment to the `comment_part` div
            $("#comment_part").append(html);
        }
    });

    });
});

</script>

<form id="comment_form" action="insert.php" method="GET">
Comments:
<input type="text" class="text_cmt" name="field1_name" id="userInput"/>
<input type="submit" name="submit" value="submit" id = "submitButton"/>
<input type='hidden' name='parent_id' id='parent_id' value='0'/>
</form>

<div id='comment_part'>
<?php
$link = mysqli_connect('localhost', 'x', '', 'comment_schema');
$query="SELECT COMMENTS FROM csAirComment";
$results = mysqli_query($link,$query);

while ($row = mysqli_fetch_assoc($results)) {
    echo '<div class="comment" >';
    $output= $row["COMMENTS"];
    //protects against cross site scripting
    echo htmlspecialchars($output ,ENT_QUOTES,'UTF-8');
    echo '</div>';
}
?>
</div>

insert.php

$userInput= $_GET["field1_name"];
if(!empty($userInput)) {
$field1_name = mysqli_real_escape_string($link, $userInput);
$field1_name_array = explode(" ",$field1_name);

foreach($field1_name_array as $element){
    $query = "SELECT replaceWord FROM changeWord WHERE badWord = '" . $element . "' ";
    $query_link = mysqli_query($link,$query);
    if(mysqli_num_rows($query_link)>0){
        $row = mysqli_fetch_assoc($query_link);
        $goodWord = $row['replaceWord'];
        $element= $goodWord;
    }
    $newComment = $newComment." ".$element;
}

//Escape user inputs for security
$sql = "INSERT INTO csAirComment (COMMENTS) VALUES ('$newComment')";
$result = mysqli_query($link, $sql);
//attempt insert query execution

mysqli_close($link);

//here you need to build your new comment html and return it
return "<div class='comment'>...the new comment html...</div>";
} 
else{
    die('comment is not set or not containing valid value');
}

The insert.php takes in the user input and then inserts it into the database (by first filtering and checking for bad words). Just not sure where I'm going wrong, been stuck on it for a while. Any help would be appreciated.

Upvotes: 0

Views: 60

Answers (2)

chriswirz
chriswirz

Reputation: 278

Change this line

$("#comment_part").html(html);

to this

$("#comment_part").html('<div class="comment" >' + $('#userInput').val() + '</div>' + $("#comment_part").html()).promise().done(function(){$('#userInput').val('')});

Upvotes: 0

exexe
exexe

Reputation: 196

html() in your function replacing current html with your comment html, thats why u see only new comment. Change your method to append().

$("#comment_part").append(html);

Upvotes: 1

Related Questions