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

Question

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

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).

Answer 2

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:
delete comment