在Laravel 5中使用Ajax从表中删除记录 [英] Delete a record from table using ajax in laravel 5

问题描述

我想使用ajax删除记录.

I want to delete the record using ajax.

视图

@foreach( $products as $product )
    <tr>
        <td>{{ $product->code }}</td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->display }}</td>
        <?php $time = date('d M, Y h:i:s A', strtotime($product->created_at)); ?>
        <td>{{ $time }}</td>
        <td>
            <a href="{{ url('/admin/products/' . $product->id . '/edit') }}" class="links-dark edits pull-left">
                <i class="fa fa-edit fa-lg"></i>
            </a>
            <div id="deleteTheProduct">
                {!! Form::open(['method' => 'DELETE', 'id' => 'formDeleteProduct', 'action' => ['AdminProductsController@destroy', $product->id]]) !!}
                    {!! Form::button( '<i class="fa fa-trash fa-lg"></i>', ['type' => 'submit', 'class' => 'delete text-danger deleteProduct','id' => 'btnDeleteProduct', 'data-id' => $product->id ] ) !!}
               {!! Form::close() !!}
           </div>
       </td>
   </tr>
@endforeach

控制器

public function destroy( $id, Request $request ) {
    $product = Product::findOrFail( $id );

    if ( $request->ajax() ) {
        $product->delete( $request->all() );

        return response(['msg' => 'Product deleted', 'status' => 'success']);
    }
    return response(['msg' => 'Failed deleting the product', 'status' => 'failed']);
}

删除ajax

$('.deleteProduct').on('click', function(e) {
    var inputData = $('#formDeleteProduct').serialize();

    var dataId = $('#btnDeleteProduct').attr('data-id');

    $.ajax({
        url: '{{ url('/admin/products') }}' + '/' + dataId,
        type: 'POST',
        data: inputData,
        success: function( msg ) {
            if ( msg.status === 'success' ) {
                toastr.success( msg.msg );
                setInterval(function() {
                    window.location.reload();
                }, 5900);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                toastr.error('Cannot delete the category');
            }
        }
    });

    return false;
});

**编辑1 **:

如果我只返回console.log(msg)，这就是我得到的

Here's what I get if I just return console.log(msg)

Object {
    id: "1",
    code: "PROD-521420",
    name: "Testing the product name",
    category_id: "3",
    short_description: "This is the short description"…
}
category_id: "3"
code: "PROD-521420"
created_at: "2015-06-07 23:00:31"
deleted_at: null
description: "This is the long description"
discount_price: "125.00"
display: "Enabled"
id: "1"
meta_description: "This is the meta description"
meta_keywords: "This is the meta keywords"
meta_title: "This is the meta title"
name: "Testing the product name"
price: "150.00"
short_description: "This is the short description"
updated_at: "2015-06-08 10:04:26"

问题是，这将删除产品，但仅删除第一行，而不删除被单击的行.

The thing is that, this deletes the product, but only the first row and not the one that is clicked.

我要删除被点击的产品.

I want to delete the product which is clicked.

任何人都可以帮忙吗?

推荐答案

您的问题在这里:

var dataId = $('#btnDeleteProduct').attr('data-id');

您只会得到第一个，因为您在所有按钮上都使用了重复的ID.因此，一个ID嘶嘶声查询将使您获得第一个.

You are only going to get the first one, because you are using a duplicate id on all buttons.. So an id sizzle query will get you the first one.

如果在删除控制器中dd($ id)，您将看到此信息.它始终是第一个的ID.您可以通过相对于event.target的查询来获取data-id属性.

You will see this if you dd($id) in your delete controller. It's always the id of the first. You can get the data-id attribute by querying relative to event.target.

您将要使用调试器；回叫中的语句以对此进行测试，但查询应类似于:

You will want to use the debugger; statement inside your call back to test this, but the query should be something like:

$(e.target).attr('data-id');

或

$(this).attr('data-id');

事件目标应该是被单击的按钮，然后在该按钮上设置数据ID，因此您只需要通过事件进行查询即可.

The event target should be the button that was clicked, and you set the data-id on that button, so you just need to query it via the event.

这篇关于在Laravel 5中使用Ajax从表中删除记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！