Question

问题已解决 ..我相应地更新了我的代码..全部谢谢

简介：我的代码显示消息跟踪数组（每个消息显示在灰色面板中）。用户可以通过单击删除按钮删除不需要的消息，该消息将在两个数据库中删除并从屏幕上消失。

似乎我的删除功能不起作用..感谢建议..我不知道AJAX ..这是我的第一次尝试。提前谢谢。

以下是我的代码：

ajax代码：

$(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);
                  }
        });
    });

观看代码的一部分：

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

控制器代码：

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

型号代码：

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

首先，您使用的是id属性错误。它们应该是唯一的，因为它出现在一个元素上，而不是像你所做的那样多。（同样，id属性不能以数字开头。）实际上不需要将它放在多个包含元素上，因为你可以使用jQuery .find()轻松遍历父母或孩子， .parent()，.closest()和other traversing methods。但是，这不应该是您的问题的原因。

现在，我认为你问题的原因是你将id属性的第二个字符传递给你的AJAX请求。

$(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);
            }
        });
});

我不再熟悉CodeIgniter，但您需要从$ _REQUEST或$ _POST数组中获取值或使用他们的built-in function。

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

修改

这是未经测试的，但我会怎样做。

<强> HTML

首先，让我们使用HTML5 data attribute将其称为data-trace-id。这将用于代替id属性的众多不正当使用。

<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 />  </div> </div> </li> <?php endforeach ?> </ul>

<强> 的JavaScript

接下来，让我们简化您的JavaScript。我会使用可怕的alert()进行调试 - 但使用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

最后，我们从$ _POST数组中获取值。检查是否有值：如果是，则删除该项;否则忽略它。

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

Answer 2

删除var DbNumberID = clickedID[1]; var myData = DbNumberID;，因为它不需要。直接指派data: { myData: clickedID },。同时通过myData在控制器中获取POST的值。

public function traceDelete() {

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

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

    return false;
}

在CodeIgniter中使用AJAX删除函数

2 个答案: