Delete function using AJAX in CodeIgniter

Question

PROBLEM SOLVED.. I update my code accordingly.. Thanks all

Intro: My code display array of message traces (each message display in grey-panel). User can delete unwanted message by click on delete button, the message will be deleted in both DB and disappear from screen.

Seems my delete function is not working.. Appreciate for advice.. I don't know AJAX.. this is my first try. Thanks in advance.

The following are my code:

ajax code:

$(document).ready(function(){
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
         var $btn = $(this),
             $li = $btn.closest('li');

        var traceId = $li.data('trace-id');

        jQuery.ajax({
                  type: 'post', 
                  url: 'traceDelete', 
                  dataType: 'text',

                  data: { 'traceId': traceId },

                  success: function (res) {
                      if (res === '1') {
                          $btn.fadeOut();
                      }
                  },
                  error: function (xhr, ajaxOptions, thrownError){
                      alert(thrownError);
                  }
        });
    });

part of view code:

<ul id="responds">
    <?php foreach ($line as $dataName => $contents){ ?>    
        <li data-trace-id="<?php echo $contents->trace_id; ?>">
            <div class="grey-panel" style="text-align:right">
                <div class="del_wrapper" id="<?php echo $contents->trace_id; ?>">
                    <a href="#" class="del_button" id="<?php echo $contents->trace_id; ?>" data-hover="tooltip" title="Delete this message <?php echo $contents->trace_id; ?>"  >
                        <i class="fa fa-times"></i>
                     </a>
                </div>
                <div class="col-sm-12 col-xs-12">
                  <?php print $contents->trace_hdr.'<br />';
                  print $contents->trace_src.'<br />';
                  print $contents->trace_dest.'<br />';
                  // some other things ?>
                </div>
            </div>
        </li> 
    <?php } ?>
</ul>

controller code:

public function traceDelete($traceID) {
    if ($traceId = $this->input->post('traceId')) {
    return $this->model_general->deleteTrace($traceId);
    }
    return false;
}

model code:

public function deleteTrace($id) {
    $this->db->where('trace_id', $id);
    $this->db->delete('trace_tbl');
    return $this->db->affected_rows() > 1 ? true:false;
}

Answer 1

First, you are using the id attributes wrong. They are meant to be unique as in appear on one element and not multiple as you have done. (As well, id attributes cannot start with a digit.) There's really no need to put it on multiple containing elements as you can easily traverse to the parents or children with jQuery's .find(), .parent(), .closest(), and other traversing methods. However, this should not be the cause of your problem.

Now, what I do think is the cause of your problem is that you are passing the 2nd character of your id attribute into your AJAX request.

$(document).ready(function(){
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
        // assign the ID e.g. "abc" to clickedID
        var clickedID = this.id; 
        // problem: assign the second character of your ID i.e. "b" into DbNumberID
        var DbNumberID = clickedID[1];
        // assign the same value to myData (which is redundant)
        var myData = DbNumberID; 

        $(this).hide(); 

        jQuery.ajax({
            type: "POST", 
            url: 'traceDelete', 
            dataType:"text", 
            // sending "myData=b"
            data: { myData: myData }, 
            success:function(traceDelete){
                alert("Deleted");
                $(DbNumberID).fadeOut();
            },
            error:function(xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
});

I am not too familiar with CodeIgniter anymore, but you need to get value from the $_REQUEST or $_POST array or use their built-in function.

$myData = $this->input->post('myData'); // because you are sending myData

EDIT

This is untested but here's how I would do it.

HTML

First, let's use HTML5 data attribute call it data-trace-id. This will be used instead of your numerous improper usages of id attributes.

<ul id="responds">
<?php foreach ($line as $dataName => $contents) : ?>    
    <li data-trace-id="<?php echo $contents->trace_id ?>">
        <div class="grey-panel" style="text-align: right">
            <div class="del_wrapper">
                <a href="#" class="del_button" data-hover="tooltip" title="Delete this message <?php echo $contents->trace_id ?>">
                    <i class="fa fa-times"></i>
                </a>
            </div>
            <div class="col-sm-12 col-xs-12">
                <?php echo $contents->trace_hdr ?><br />
                <?php echo $contents->trace_src ?><br />
                <?php echo $contents->trace_dest ?><br />
                <!-- etc -->
            </div>
        </div>
    </li> 
<?php endforeach ?>
</ul>

JavaScript

Next, let's simplify your JavaScript. I'll use the dreaded alert() for debugging purposes -- but it's usually better to use console.log().

$(function() {
    $("#responds").on("click", ".del_button", function (e) {
        e.preventDefault();

        // keyword 'this' refers to the button that you clicked;
        // $(this) make a jQuery object out of the button;
        // always good idea to cache elements that you will re-using;
        var $li = $(this).closest('li');

        // get the associated trace ID from the list-item element;
        var traceId = $li.data('trace-id');

        alert('trace ID ' + traceId);

        // assuming you only want to hide the message only if it has been been successfully deleted from the DB?
        // if that is the case, then you have to wait for the AJAX response to tell you whether it was
        jQuery.ajax({
            type: 'post', 
            url: 'traceDelete', 
            dataType: 'text',
            // notice how I am using 'traceId'? on the server-side, the data will accessible by using $_POST['traceId'] or $this->input->post('traceId') 
            data: { 'traceId': traceId },
            // look at the response sent to you;
            // if I am not mistaken (boolean) true and false get sent back as (strings) 1 or 0, respectively;
            // so if the response is 1, then it was successfully deleted
            success: function (res) {
                alert('AJAX response ' + res);
                if (res === '1') {
                    alert('hiding button');
                    // hide the message
                    $li.fadeOut();
                }
            },
            error: function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
    });
});

PHP

Lastly, we take the value from the $_POST array. Check whether there is a value: if so, delete the item; otherwise ignore it.

public function traceDelete() 
{
    if ($traceId = $this->input->post('traceId')) {
        echo $this->model_general->deleteTrace($traceId) ? '1' : '0';
    }
    echo '0';
}

Answer 2

remove var DbNumberID = clickedID[1]; var myData = DbNumberID;, as its not needed. Directly assign data: { myData: clickedID },. Also get value of myData in controller via POST.

public function traceDelete() {

    $traceID = $this->input->post('myData');

    if($traceID)
        return $this->model_general->deleteTrace($traceID);

    return false;
}