How to stop foreach to repeat content? - php

Question

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">
New Product
</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">
Edit
</th>
<th scope="col" class="actions-col">
Delete
</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">×</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')
Delete
</form>
#endforeach
</div>
</div>
</div>
</div>
</div>
How do I tweak this?

Answer 1

You need to use pass data attr in delete button and append into modal form using js script.
Change into HTML
Delete
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')
Delete
</form>
</div>

Answer 2

<div class="container">
<div class="quotes">
<div class="col-md-12">
<div class="pages-header text-right">
New Product
</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">
Edit
</td>
<td scope="col" class="actions-col">
Delete
</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">×</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')
Delete
</form>
#endforeach
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
{{ $products->links() }}
</div>
</div>
</div>
<!-- Modal -->
</div>