PHP/jQuery: Ajax call & where to have my code?

Question

Hello. So im making a "delete" button to my commentsystem.. I want to make it smart, so it should run a ajax call to remove the comment.

Now I have tried out myself, this and have gotten this far:

<?php
echo "<a href='#' onclick='javascript:DoCommentWallRemove()' title='ta bort inlägg'> <span class='removeWallComment'></span> </a>";
?>
<script type="text/javascript">
    function DoCommentWallRemove(){
      var wrapperId = '#profileWall';
        $.ajax({ 
           type: "POST",
           url: "misc/removeWallComment.php",
        data: {
        value: 'y',
        commentwallid : "<?php echo $displayWall['id']; ?>",
        BuID : "<?php echo $v['id']; ?>",
        uID : "<?php echo $showU['id']; ?>"
        },
           success: function(msg){
    alert(msg);
            }
         });
    }
</script>

Now as my comments shows in a while(), I have placed the JS function is right under the link, so it should grab the actual comment id, but instead it gives the same ID to every comment.

But when i do a normal php <?php echo $displayWall['id']; ?> it shows different comment ids like it should do in the javascript.

Answer 1

Eww, that's just gross! You probably want something like this:

function removeComment(id, obj) {
    $.post('misc/removeWallComment.php', {id: id}, function(msg) {
        alert(msg); // or do some useful stuff,
                    // like remove the comment from the page
                    // with 'obj' you'll know which comment to remove :)
    });
}

And then just something like this for each comment:

<a href="#" onclick="removeComment(id, this); return false;">delete comment</a>

Answer 2

I would suggest a similar solution to GuidoH, but with a few minor changes.

PHP Code for the Comment Thread:

<form method="post" action="misc/removeWallComment.php">
  <input type="hidden" name="value" value="y" />
  <input type="hidden" name="BuID" value="<?php echo $v['id']; ?>" />
  <input type="hidden" name="uID" value="<?php echo $showU['id']; ?>" />
  <div id="commentList">
  <?php
  foreach( $comments as $c ){
    echo '<div id="comment'.$c['id'].'">';
      echo $c['commentBody'];
      echo '<input class="delButton" type="submit" name="'.$c['id'].'" value="Delete Comment" />';
    echo '</div>';
  }
  ?>
  </div>
</form>

This will render as:

<form method="post" action="misc/removeWallComment.php">
  <input type="hidden" name="value" value="y" />
  <input type="hidden" name="BuID" value="ThisIsThe_BuID" />
  <input type="hidden" name="uID" value="ThisIsThe_uID" />
  <div id="commentList">
    <div id="comment001">
      This is Comment Number One
      <input class="delButton" type="submit" name="001" value="Delete Comment" />
    </div>
    <div id="comment002">
      And, This is Comment Number Two
      <input class="delButton" type="submit" name="002" value="Delete Comment" />
    </div>
  </div>
</form>

In the Javascript for the page holding the Comment thread:

<script>
$(document).ready(function(){

 /* Add a Handler for the Delete Button */
  $('div#commentList input.delButton').click(function(e){
   /* Stop the Link working */
    e.preventDefault();
   /* Alias the main jQuery Objects */
    $this = $(this);
    $comment = $this.closest('div');
    $form = $comment.closest('form');
   /* Grab the Comment Number from the Button's NAME attribute */
    commentID = $this.attr('name');

   /* Perform the AJAX Action */
    $.ajax({
      url : $form.attr('action') ,
      type : 'POST' ,
      data : {
               'value'         : $form.find( 'input[name="value"]' ).val() ,
               'commentwallid' : commentID ,
               'BuID'          : $form.find( 'input[name="BuID"]' ).val() ,
               'uID'           : $form.find( 'input[name="uID"]' ).val() ,
               'mode'          : 'ajax'
             } ,
      dataType : 'text' ,
      complete: function( XHR , status ){
        if( $.trim(status).toLowerCase()=='success'
            && $.trim(XHR.responseText).toLowerCase()=='comment deleted' ){
         /* Success - Hide, then Remove the Comment */
          $comment.hide().remove();
        }else{
         /* Something Went Wrong */
          alert('Deleting Comment #'+commentID+' Failed');
        }
      }
    });

  });

});
</script>

In the misc/removeWallComment.php file:

if( $_POST['mode']=='ajax' ){

 /* Perform the Action. Return 'Comment Deleted' is Successful */

}else{

 /* This is to Extract the Comment ID from the "Delete Comment" button */
  $_POST_REV = array_flip( $_POST );
  $_POST['commentwallid'] = $_POST_REV['Delete Comment'];

 /* Perform the Action.
    Return the Full Page, or Redirect, you want Non-Javascript Users to See. */

}

NOTE:

This advice is based on the assumption he BuID and uID variables are the same for any delete action performed by the user from the same page.

Edited:

Updated to provide Graceful Degradation in the event that the user does not allow Javascript to run, and to extract a number of variables from the HTML FORM, (rather than have to code them in twice).