CODEWITHSUNDEEP
javascriptphpjqueryajax
bɪˈɡɪnə
bɪˈɡɪnə

Reputation: 1085

Problen with my ajax code to display comment

The code below is a attempt to create a comment system using ajax and php here php part works well comment is inserted into table but seems I didn't get my hands on ajax yet. Ajax does not work comment is not shown unless I reload page. On reloading page comment appears perfectly where it should be so help me on fixing my ajax code.

<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));   
}
?>


  <div class='db'>
  <table>
  <tr>
  <td>
  <img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
  </td>
  <td>
  <a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
  <p><?php echo $tar['comment']; ?></p>
  </td> 
  <td>
   <a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
   </td>
   </tr>
   </table>
        </div>

<script type="text/javascript" >
$(function() {
  $(".comment_button").click(function() {

    var test = $("#content").val();
    var dataString = 'content=' + test;

    if (test == '') {
      alert("Please Enter Some Text");
    } else {

      $.ajax({
        type: "POST",
        url: "",
        data: dataString,
        cache: false,
        success: function(html) {
          $(".db").show(html);
        }
      });
    }
    return false;
  });
});
</script>


<form method='post' name='form' action='' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>

Upvotes: 0

Views: 110

Answers (3)

Little Phild
Little Phild

Reputation: 805

Try this. And make sure jQuery library is also included in your page.

HTML PAGE

<script type="text/javascript" >
    $(function() {
         $(".comment_button").click(function() {
            var test = $("#content").val();
            var comment = test;

            if (test == '') {
              alert("Please Enter Some Text");
            } else {

              $.ajax({
                type: "POST",
                url: "process.php",
                data: {content : comment},
                cache: false,
                success: function(html) {
                  $("#db").append(html);
                }
              });

            }
            return false;
          });
        });
        </script>

    <div id="db">
         <!--Returned comment will appear here -->
    </div>

        <form method='post' name='form' action='process.php' class='commentbox'>
        <textarea cols='30' rows='2' name='content' id='content'></textarea><br />
        <input type='submit' value='Comment' name='submit'class='comment_button'/>
        </form>

PHP PAGE
process.php

 <?php

    if(isset($_POST['content'])) {
    $comment=strip_tags($_POST['content']);
    $com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
    $com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));   
        }
    ?>
<table>
  <tr>
  <td>
  <img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
  </td>
  <td>
  <a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
  <p><?php echo $tar['comment']; ?></p>
  </td> 
  <td>
   <a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
   </td>
   </tr>
   </table>

Upvotes: 1

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

You dont need to use the variable dataString and you need to change the $.ajax() function for this:

var test = $("#content").val();

$.ajax({
    type: "POST",
    url: "",
    data: {
        content: test;
    },
    success: function(response) {
      $(".db").append(response);
    }
  });

change the following line to avoid page refreshes:

$(".comment_button").click(function(event) {
    event.preventDefault();

or change the attrubute type="submit" of your button for type="button", like this:

<button type='button' name='submit' class='comment_button'>Comment</button>

I hope it helps you...

Upvotes: 1

Ahsan
Ahsan

Reputation: 1084

Use

$(".db").append(html);

if you already have existing comments like:

<div class = "db">
  Comment 1
  Comment 2
  ...
</div>

.append will add more HTML to existing tag.

Upvotes: 0

Related Questions