What are the possible reasons why modal doesn't shows? - laravel

Question

I have two button for modal and created two modal included in my blade file which I'm trying to use but it doesn't seem to work, I tried deleting the other button but doesn't seem to work, which I assumed to be the case
What could have been the reason for the modals not to show up?
this is my button modals
<td class="table-danger"><button id="aaaBtn" class="soldbtn btn-warning" data-toggle="modal" data-target="#soldModal{{$data->id}}">SOLD</button></td>
<td class="table-warning"><button id="bbbBtn" class="updatebtn btn-success" data-toggle="modal" data-target="#updateModal{{$data->id}}" >UPDATE</button></td>
<!-- Modal -->
<div class="modal fade" id="updateModal{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel{{$data->id}}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<img src="assets/images/rice.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="col-lg-12">
<div class="contact-form">
<form id="contact" action="{{url('/reservation')}}" method="post" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-lg-12 col-sm-12" align="center">
<h3>{{$data->title}}</h3>
<img height="200" width="200" src="productimage/{{$data->image}}">
<h5 class='m-2'>~ KILOS ~</h5>
</div>
</div>
<div class="row col-12">
#foreach($modal_data as $modal_data)
<div class="row sm-6 ml-4 mb-1" class="no-gutters" style="height:25px; width: auto;">
<p class='text-dark mr-2'><input type="checkbox" name="prod_kilos[]" value="{{$modal_data->kg}}" id="checkitem" class="check-cls"/> {{$modal_data->kg}}kg </p>
<p class='text-dark'>Qty:</p><input style="width:80px; height:25px;" type="number" name="prod_qty[{{$modal_data->kg}}]" min="1" value="1" max="{{$modal_data->warehouse_qty}}" class="form-control ml-2">
<input type="hidden" name="product_name[{{$modal_data->kg}}]" value="{{$modal_data->title}}">
<input type="hidden" name="product_fee[{{$modal_data->kg}}]" value="{{$modal_data->price}}">
<input type="hidden" name="prod_id[{{$modal_data->kg}}]" value="{{$modal_data->id}}">
</div>
#endforeach
</div>
<div class=" col-lg-12 mt-5">
<button name="submit" type="submit" id="form-submit" class="submit-btn" >ADD TO CART</button>
</div>
</form>
</div>
</div>
<script>
</div>
</div>
</div>
<!-- End Modal -->

Answer 1

What is the problem?
I think the reason why it is not working is because you set wrong data-target to the button:
<button data-target="#updateModal">UPDATE</button>
But when creating modal you use:
<!-- Modal -->
<div id="updateModalModal{{$data->id}}">
</div>
<!-- End Modal -->
Your data-target attributes does not correspond with each other.
How to solve?
The data-target attribute should point to an existing element in page, changing it to:
<button data-target="#updateModal{{$data->id}}">UPDATE</button>
<!-- Modal -->
<div id="updateModal{{$data->id}}">
</div>
<!-- End Modal -->
should solve the problem.
Hope it helps. Read more about it here.