What is the best possible way/results using a link a div and ajax to pass data without a page refresh. I'm wanting my comments and div to fade out when clicked and don't want the page to refresh. So it stays exactly where I delete the comment.
I've tried this, but its not working
<script>
function delete_(pid){
$.ajax({
type: "POST",
url: "include/post.delete.php",
data: "pid="+pid,
success: function(){
$("#comment-"+pid).remove();
}
});
}
</script>
<? if($streamitem_data['streamitem_creator']==$_SESSION['id']){
echo "<div style='cursor:pointer;' onclick=\"delete_('".$streamitem_data['streamitem_id']."');\">Delete comment</div>";
But it's not giving me the above results I need. Maybe I'm doing something wrong, but I need help if possible.
Don't use a form with a submit action to delete that comment. When submitting a form, the page is automatically reloaded. Instead use a simple element with an onclick handler to trigger the AJAX request:
<div onclick="delete_('anyID');">Delete comment</div>
EDIT: Example:
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function delete_(pid){
$.ajax({
type: "POST",
url: "include/post.delete.php",
data: "pid="+pid,
success: function(){
$("#comment-"+pid).remove();
}
});
}
</script>
</head>
<body>
<div id="comment-123">This is a comment.</div>
<div onclick="delete_('123');">Delete comment</div>
</body>