CODEWITHSUNDEEP
phpmysqlhtmlajaxcomments
Howaida Khoureieh
Howaida Khoureieh

Reputation: 559

Commenting System - Ajax, Php & MySql

I've succeeded to write a simple commenting system with a form of 2 fields: name and comment. When the user inters values and presses submit it simply adds the comment to the current page using Ajax (without loading the whole page).

Now, I need also to add the ability of "Deleting Comment", but I have no idea how can I implement that.

If you take a look at my code bellow you would notice that when loading the page I printed all the existing comments, and when adding new ones I simply added them to the HTML code by this sub-code:

document.getElementById("result").innerHTML += 
        "<font color='red' size='5'>" + str + "</font>";;

I thought of declaring an array that holds the values of all the comments with an additional value for each one "active". When this value is trua I print the current comment, else I dont.

I've not succeeded to implement that, besides, Is it a good solution at all? cause this solution prints all the comments all over again each time the user presses submit.

Any suggestions?

I would appreciate your help.

This is My Code:

main.php

<html>
    <head>
    <title> </title>
    <script language="Javascript" src="ajax.js"> </script>
  </head>


  <body>
   <h1 align="center"><font color="#000080">Welcome, </font></h1>
   <p  align="center"><font color="#000080">Enter your name &amp; comment then press 
   "Submit Button"</font></p>
    <form name="f1" method="post">
       <p align="center"><font color="#000080">&nbsp;
        Enter your name: <input type="text" name="username" id="username">
        <font color="#000080">&nbsp;
        Enter your comment: <input type="text" name="comment" id="comment">
        <input value="Submit" type="button" 
       onclick='JavaScript:postRequest()' name="showdate"></font></p>



     </form>
     </br></br>

     <?php
     include_once("config.php");
     $query = "SELECT * FROM `comments` ORDER BY 'id'"; 
    //Execute query
     $qry_result = mysql_query($query) or die(mysql_error());

    // Insert a new row in the table for each person returned
     while($row = mysql_fetch_array($qry_result)){
        echo ' <p align="center">';
        echo "<font color='red' size='5'> name: </br>".$row['added_by'];
        echo " </br>comment: </br>".$row['comment'];
        echo "</font></p>";}
     ?>
    <div id="result" align="center">  </div>
</body>
</html>

showcomments.php

name: ' .$name; echo 'comment: ' .$content; echo '' ?>

ajax.js

   function postRequest() {
    var xmlHttp;
          try{
   // Opera 8.0+, Firefox, Safari
   xmlHttp = new XMLHttpRequest();
 }
             catch (e)
             {
               // Internet Explorer Browsers
               try{
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
               }
               catch (e) {
                  try
                  {
                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch (e)
                  {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
             }

        var usr=window.document.f1.username.value;
        var cmnt=window.document.f1.comment.value;
        var url = "showcomments.php?username=" + usr +"&comment=" + cmnt;
        xmlHttp.open('GET', url, true);
        xmlHttp.setRequestHeader
              ('Content-Type', 'application/x-www-form-urlencoded');

        xmlHttp.onreadystatechange =function(){
            if(xmlHttp.readyState == 4){
                updatepage(xmlHttp.responseText);
            }
        }


        xmlHttp.send(url);
        }

     function updatepage(str){
        document.getElementById("result").innerHTML += 
            "<font color='red' size='5'>" + str + "</font>";;
        }

(P.S: I created a table using MySql named "comments" with the following columns: Id, Added_by, comment.)

Upvotes: 0

Views: 1390

Answers (1)

JarroVGIT
JarroVGIT

Reputation: 5314

I would not only print the name and comment in you PHP file, but also a form with a hidden field containing the ID. Or, even better, a button with a onClick="deleteComment(ID)". More importantly: place every comment in a p-tag with an ID, with id=comment-id. Your main.php PHP file would be expanded with this:

while($row = mysql_fetch_array($qry_result)){
    echo ' <p align="center" id="'.$row['id'].'>';
    echo "<font color='red' size='5'> name: </br>".$row['added_by'];
    echo " </br>comment: </br>".$row['comment'];
    echo "</font></p>";}

This (ajax)-function deleteComment(ID) then sends the ID of the comment to be deleted to another PHP-script. This deletes it from the database.

Now you have two options: you either delete the p-tag on the page by it's ID (this is very easy with jQuery with the function $('IDofP').empty(); ) or you reload all the comments.

Upvotes: 0

Related Questions