Dynamic Bootstrap Modal in Laravel

Question

I want to show product details in Bootstrap Modal dynamically. Here is my controller

$products = Product::all();
return view('landing')->with('products', $products);

And my view

@foreach($products as $index => $product)
 <div class="product-text col-lg-6">
  <h3><a href="#">{{$product->name}}</a></h3>
   <div class="product-meta">
    <p>{{$product->details}}</p>
   </div>
   <a data-toggle="modal" data-target="{{ $index }}">Modal</a>
  </div>
@endforeach
      
    <div class="modal fade" id="{{ $index }}" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
        
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title">{{$product->name}}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            
            </div>
            <div class="modal-body">
            <p>{{$product->description}}</p>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        
        </div>
    </div>

How can I show details for specific product?

Answer 1

We can use 2 methods for this solution.

1. use foreach to include the model code. Actually, this is not a good way. It takes more time to load the page and this is not a good practice

2. Use ajax . This is the best way to show your product details on a model by click on the Button

So you can use the second way.