Query not running when I click delete button even though .success says it worked

Question

I have made a model that is called when I click on delete from a toggle down menu. It then gives a list of data that I can delete by clicking the button next to them. But for some reason I can't figure out when the page reloads nothing is deleted. I added an alert 'success' after the success in the javascript. This alert is called but the data is not deleted. The bootstrap and jQuery links are in the index page which all work perfect. This problem has be dumbfounded and if anyone can shed any light on it I'd greatly appreciate it.

This is the html:

<div class="modal fade" id="delete_comment" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="form-horizontal" role="form">
        <div class="modal-header">
          <h4>Delete comments</h4>
        </div>
        <div class="modal-body">
          <?php $comment_array = comments::get_comments($username); ?>

          <?php if(isset($comment_array) && is_array($comment_array)): ?>

          <?php
            foreach ($comment_array as $key => $comment):
            foreach($comment as $key2 => $comment2):

            $max = count($comment_array);
            $i=1;

            while($i<=$max):
          ?>

          <?php
            $comment_id = $comment2->id;
            $comment_name = $comment2->comment_name;
            $comment_type = $comment2->comment_type;
          ?>

          <form class="comment_delete_area_wrapper" action="" method="post">
            <div class="comment_delete_wrapper">
              <ul>
                <li class="comment_delete_comments">
                  <?php echo $comment_type ?> : <?php echo $comment_name; ?>
                </li>
              </ul>

              <div class="comment_delete_button_wrapper">
                <input type="submit" id="<?php echo $comment_id; ?>"
                       class="btn btn-danger comment_delete_button" value="Delete"/>
              </div>
              <br>
              <hr>
              <input type="hidden" value="<?php echo $comment_id; ?>"
                     id="comment_delete_id" name="comment_delete_name"/>
            </div>
          </form>
          <?php $i++; ?>
          <?php endwhile;?>
          <?php endforeach; ?>
          <?php endforeach;?>
          <?php endif; ?>
        </div>

        <div class="modal-footer">
          <a class="btn btn-default" data-dismiss="modal">Close</a>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the PHP code for the classes. The comments are all drawn from the database perfect and appear perfect. The problem is deleting them.

<?php

class Comments{

    public static function delete($cl_id)
{


    $db = new PDO('mysql:host=localhost;dbname=comment;charset=utf8', 'root', '');
    $stmt = $db->prepare("DELETE FROM `comments` WHERE id = :cl_id");

    $stmt->bindParam(':cl_id', $cl_id);
    if ($stmt->execute()) {
        return true;
    } else {
        return null;
    }
}

}

And the javascript:

$(document).ready(function(){
add_delete_handlers();
});

function add_delete_handlers(){
$('.comment_delete_button').each(function(){
    var btn = this;
    $(btn).click(function(){

        comment_delete(btn.id);

    });
});
}

function comment_delete(_comment_id){

$.post('comment_area_ajax/comment_delete.php', {
        task: 'comment_delete',
        comment_id: _comment_id
    }
).success(function(data){
        alert('Success');
        $('#_' + _comment_id).detach();
    });

 }

And lastly the code to be called by the AJAX:

<?php
if(isset($_POST['task']) && $_POST['task'] =='comment_delete') {
require_once '../comment_area_sql/models/comment_delete_model.php';
require_once '../comment_area_sql/models/comments.php';

    if(class_exists('Comments')){

          if(Comments::delete($_POST['comment_id'])){
                echo 'true';
}else{
                echo 'false';
}

?>

Answer 1

try:

$(document).ready(function() {
    add_delete_handlers();
});

function add_delete_handlers() {
    $('.comment_delete_button').click(function() {
        comment_delete($('this').attr('id'));
    });
}

function comment_delete(_comment_id) {
    $.post('comment_area_ajax/comment_delete.php', {
        task: 'comment_delete',
        comment_id: _comment_id
    }, function(data) {
        alert('Success');
        $('#_' + _comment_id).detach();
    });
}

Try this for your ajaxed file:

<?php
    if(isset($_POST['task']) && $_POST['task'] =='comment_delete') {
        require_once '../comment_area_sql/models/comment_delete_model.php';
        require_once '../comment_area_sql/models/comments.php';
        if(class_exists('Comments')){
            if(Comments::delete($_POST['comment_id'])){//note the change
                $message = 'comment deleted';
            }else{
                $message = 'we have a error';
            }
           return json_encode(array('message'=>$message));
        }
    }
?>