时间戳

首页 > 解决方案 > 在laravel中通过ajax删除数据

javascript - 在laravel中通过ajax删除数据

问题描述

我正在尝试通过 ajax 删除项目，到目前为止我可以获取每个项目 ID，但是当我单击删除按钮时，它只是获取第一个项目 ID。

代码

controller

public function delqtydisc(Request $request,$id)
 {
      $dele = QtyDiscount::find($id)->delete();
      return response()->json($dele);
 }

route

Route::post('/delqtydisc/{id}', 'QtyDiscountController@delqtydisc')->name('delqtydisc');

script

<script>
  $(document).ready(function() {
    $("#addnewqtydiscmsgsave").click(function(e){
      e.preventDefault();
      //this adds new items to database (no issue here)
      $.ajax({
        type: "post",
        url: "{{ url('admin/addnewqtydisc') }}",
        data: {
          '_token': $('input[name=_token]').val(),
          'product_id': $('#product_id').val(),
          'amount': $('#amount').val(),
          'min': $('.min').val(),
          'max': $('.max').val(),
        },
        success: function (data) {
          $('#addnewqtydiscmsg').empty();
          $('#addnewqtydiscmsg').append('<span class="text-success">Discount created successfully.</span>');

          var $tr = $('<tr/>');
          $tr.append($('<td/>').html(data.min));
          $tr.append($('<td/>').html(data.max));
          $tr.append($('<td/>').html(data.amount));

          // This adds delete button to my table
          $tr.append($('<td/>').html("<button class='qtyitemid btn btn-xs btn-danger' data-id='" + data.id + "' type='button'>Delete this</button>"));

          $('.list-order tr:last').before($tr);

          $("#min").val('');
          $("#max").val('');
          $("#amount").val('');

          // From this part delete function adds

          $('.qtyitemid').on('click', function() {
            e.preventDefault();
              var QtyitemID = $('.qtyitemid').data('id');
              console.log(QtyitemID);
              $.ajax({
                  type: 'post',
                  url: '{{ url('admin/delqtydisc') }}/'+encodeURI(QtyitemID),
                  data: {
                      '_token': $('input[name=_token]').val(),
                      'id': QtyitemID
                  },
                  success: function(data) {
                      $('#addnewqtydiscmsg').empty();
                      $('#addnewqtydiscmsg').append('<span class="text-danger">Discount deleted successfully.</span>');
                  }
              });
          });
          // end of delete fuction
        },
        error: function (data) {
            console.log('Error:', data);
        }
      });
    });
  });
</script>

PS：我评论了我认为应该引起您注意的 JavaScript 代码的每个 // This adds delete button to my table部分// From this part delete function adds

错误

当我点击删除按钮时，我在网络中得到 3 个结果（如果我有 3 个输入），第一个返回true另一个 2 个返回

"message": "Call to a member function delete() on null",

任何想法？

更新

使用下面的代码，我的问题得到了一些解决，唯一的问题是我仍然得到我的行 ID 的倍数。e.g.当我删除id=1网络显示一次但之后我删除id=2网络显示两次id=2

<script>
  $(document).ready(function() {
    $("#addnewqtydiscmsgsave").click(function(e){
      e.preventDefault();
      $.ajax({
        type: "post",
        url: "{{ url('admin/addnewqtydisc') }}",
        data: {
          '_token': $('input[name=_token]').val(),
          'product_id': $('#product_id').val(),
          'amount': $('#amount').val(),
          'min': $('.min').val(),
          'max': $('.max').val(),
        },
        success: function (data) {
          $('#addnewqtydiscmsg').empty();
          $('#addnewqtydiscmsg').append('<span class="text-success">Discount created successfully.</span>').fadeIn().delay(4000).fadeOut();

          var $tr = $("<tr id='" + data.id + "'>");
          $tr.append($('<td>').html(data.min));
          $tr.append($('<td>').html(data.max));
          $tr.append($('<td>').html(data.amount));
          $tr.append($('<td>').html("<button class='qtyitemid btn btn-xs btn-danger' data-id='" + data.id + "' type='button'>Delete this</button>"));
          $('.list-order tr:last').before($tr);

          $("#min").val('');
          $("#max").val('');
          $("#amount").val('');
          //delete item
          $('.qtyitemid').on('click', function() {
            e.preventDefault();
              var QtyitemID = $(this).data('id');
              console.log(QtyitemID);
              $.ajax({
                  type: 'post',
                  url: '{{ url('admin/delqtydisc') }}/'+encodeURI(QtyitemID),
                  data: {
                      '_token': $('input[name=_token]').val(),
                      'id': QtyitemID
                  },
                  success: function(data) {
                      $('#addnewqtydiscmsg').empty();
                      $('#addnewqtydiscmsg').append('<span class="text-danger">Discount deleted successfully.</span>').fadeIn().delay(3000).fadeOut();
                      $('table tr#'+QtyitemID+'').remove();
                  }
              });
          });
          //
        },
        error: function (data) {
            console.log('Error:', data);
        }
      });
    });
  });
</script>

PS：基本上我的大部分问题都解决了，我只是在寻找答案以避免网络中出现这种多重 id。

标签： javascriptlaravel

解决方案

错误发生在您qtyitemid的点击事件中。特别是这一行：var QtyitemID = $('.qtyitemid').data('id'); 这个JS代码总是会返回第一个qtyitemid类的数据。您必须使用关键字this来确定单击的元素。此代码有望解决问题：

    $('.qtyitemid').on('click', function() {
            e.preventDefault();
              var QtyitemID = $(this).data('id');
              console.log(QtyitemID);
              $.ajax({
                  type: 'post',
                  url: '{{ url('admin/delqtydisc') }}/'+encodeURI(QtyitemID),
                  data: {
                      '_token': $('input[name=_token]').val(),
                      'id': QtyitemID
                  },
                  success: function(data) {
                      $('#addnewqtydiscmsg').empty();
                      $('#addnewqtydiscmsg').append('<span class="text-danger">Discount deleted successfully.</span>');
                  }
              });
          });

推荐阅读