Why Does Owl Carousel Break Bootstrap Modal In My Laravel App? - php

Question

Good day. In my Laravel App, I have a foreach loop where I display all products. I also have a quickview modal where users can view the products without loading a new page. Furthermore, I am using owlcarousel.js to display the products. Unfortunately, owl.carousel breaks the bootstrap modal unless the modal is placed outside the owl.carousel. But, since the products are loaded on the page dynamically, I can't access the ids of the modals outside the owl carousel div which encompasses the loop.
The $modal_id variable is only returning the last Id in the loop. So, please what is the way out?
How can I access the individual ids within the loop from on click from outside
The code is shown below
<div class="product owl-carousel">
<?php $modal_id = 0; ?>
#foreach($new_arrivals as $new_arrival)
<div class="pro">
<div class="pro-img">
<?php $modal_id = $new_arrival->id?>
<span class="sticker-new">new</span>
<div class="quick-view-pro">
<a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"
href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>
</div>
</div>
</div>
#endforeach
</div>
<!-- Modal is shown below !-->
<div class="product-view">
<div class="container">
<div class="modal fade" id="{{$modal_id}}">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
</div>
</div>

Answer 1

Try this code:
<div class="product owl-carousel">
<?php $modal_id = 0; ?>
<?php $modal_ids = []; ?>
#foreach($new_arrivals as $new_arrival)
<div class="pro">
<div class="pro-img">
<?php $modal_id = $new_arrival->id?>
<?php $modal_ids[] = $new_arrival->id ?>
<span class="sticker-new">new</span>
<div class="quick-view-pro">
<a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"
href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>
</div>
</div>
</div>
#endforeach
</div>
<!-- Modal is shown below !-->
#foreach($modal_ids as $item)
<div class="product-view">
<div class="container">
<div class="modal fade" id="{{$item}}">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
</div>
</div>
#endforeach
Hope help you.