Php versions - How to stop foreach to repeat content?

hemoglobin
November 25, 2019
81 views
0 votes
2 Answers

I don’t know PHP, so this might be a very basic question. I apologize in advance.

I’m working on a page that has a list of products and for each product, there is an option to delete it. The backend dev made it so it works great. However, they’re not available at the moment and the client wants a modal that checks with the user if they’re sure they want to delete a product before the action is complete.

I’ve included a modal. And just moved the delete action to the modal’s ‘Yes’ button. However, because we have several products listed, it keeps repeating the button over and over. I realize this might be a basic fix, but I have no idea what I’m doing. Can someone please just take a look? Thank you!

Here’s the (edited – I moved the action to the modal in this version) code:

<div class="container">
    <div class="quotes">
        <div class="col-md-12">
            <div class="pages-header text-right">
                <a href="{{route('product.create')}}" class="btn btn-success new-quote-button">New Product</a>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card rounded-0 border-0 active-products">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">Products</h3>
                </div>
                <table class="table text-center" cellspacing="0">
                    <thead>
                        <tr>
                            <th scope="col" class="text-left quote-name">Name</th>
                            <th scope="col">Category</th>
                            <th scope="col">Hardware Price</th>
                            <th scope="col">Yearly License Cost</th>
                            <th scope="col">Monthly License Cost</th>
                            <th scope="col">Type</th>
                            <th scope="col" colspan="2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                        <tr>
                            <th scope="col" class="quote-name">
                                {{$product->name}}
                            </th>
                            <th scope="col">
                                {{$product->category}}
                            </th>
                            <th scope="col">
                                {{$product->hardware_price}}
                            </th>
                            <th scope="col">
                                {{$product->yearly_license_cost}}
                            </th>
                            <th scope="col">
                                {{$product->monthly_license_cost}}
                            </th>
                            <th scope="col">
                                {{$product->type}}
                            </th>
                            <th scope="col" class="actions-col">
                                <a href="{{route('product.edit', $product->id)}}" class="text-primary">Edit</a>
                            </th>
                            <th scope="col" class="actions-col">
                                <a href="#" class="text-danger" data-toggle="modal" data-target="#deleteModal">Delete</a>
                            </th>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

                {{ $products->links() }}
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    @foreach($products as $product)
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <form method="POST" action="{{route('product.destroy', $product)}}" id="delete-{{$product->id}}">
                        @csrf
                        @method('DELETE')

                        <a href="#" class="text-danger">Delete</a>
                    </form>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

How do I tweak this?

Tags: php

Answers

You need to use pass data attr in delete button and append into modal form using js script.

Change into HTML

<a href="#" class="text-danger deleteproduct" data-id="{{$product->id}}" data-product="{{$product}}" data-toggle="modal" data-target="#deleteModal">Delete</a>

Add JS Script

 $(document).on('click', '.deleteproduct', function(e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        var product = $(this).attr('data-product');
        $('#Deletefrm').attr('id','delete-'+id);
        $('#Deletefrm').attr('action','/product.destroy/'+product);
    });

 $('#deleteModal').on('hidden.bs.modal', function(e) {
        $('#Deletefrm').attr('id','');
        $('#Deletefrm').attr('action','');
    });

Change in Modal

<div class="modal-footer">

 <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <form method="POST" id="Deletefrm" action="" id="">
                    @csrf
                    @method('DELETE')

                    <a href="#" class="text-danger">Delete</a>
                </form>
            </div>

<div class="container">
    <div class="quotes">
        <div class="col-md-12">
            <div class="pages-header text-right">
                <a href="{{route('product.create')}}" class="btn btn-success new-quote-button">New Product</a>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card rounded-0 border-0 active-products">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">Products</h3>
                </div>
                <table class="table text-center" cellspacing="0">
                    <thead>
                    <tr>
                        <th scope="col" class="text-left quote-name">Name</th>
                        <th scope="col">Category</th>
                        <th scope="col">Hardware Price</th>
                        <th scope="col">Yearly License Cost</th>
                        <th scope="col">Monthly License Cost</th>
                        <th scope="col">Type</th>
                        <th scope="col" colspan="2"></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td scope="col" class="quote-name">
                                {{$product->name}}
                            </td>
                            <td scope="col">
                                {{$product->category}}
                            </td>
                            <td scope="col">
                                {{$product->hardware_price}}
                            </td>
                            <td scope="col">
                                {{$product->yearly_license_cost}}
                            </td>
                            <td scope="col">
                                {{$product->monthly_license_cost}}
                            </td>
                            <td scope="col">
                                {{$product->type}}
                            </td>
                            <td scope="col" class="actions-col">
                                <a href="{{route('product.edit', $product->id)}}" class="text-primary">Edit</a>
                            </td>
                            <td scope="col" class="actions-col">
                                <a href="#" class="text-danger" data-toggle="modal" data-target="#deleteModal-{{$product->id}}">Delete</a>

                            </td>
                            <td>
                                <div class="modal fade" id="deleteModal-{{$product->id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel-{{$product->id}}" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel-{{$product->id}}">Modal title</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                ...
                                            </div>
                                            <div class="modal-footer">
                                                @foreach($products as $product)
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                                                    <form method="POST" action="{{route('product.destroy', $product)}}" id="delete-{{$product->id}}">
                                                        @csrf
                                                        @method('DELETE')

                                                        <a href="#" class="text-danger">Delete</a>
                                                    </form>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

                {{ $products->links() }}
            </div>
        </div>
    </div>

    <!-- Modal -->

</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Php versions – How to stop foreach to repeat content?

Answers