Cannot load data from PHP + JQuery to Bootstrap 3 Modal - php

Question

Briefly speaking, my site has a Bootstrap modal, which is used for display a Youtube video, like following
<!-- Video dialog-->
<div class="modal fade" id="vid-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title">
<h4 id="modal-title">Modal title</h4>
</div>
</div>
<div class="modal-body">
<div class="modal-video">
<iframe src=""></iframe> <!-- Code for video here -->`
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End video dialog-->
This modal is displayed each time user clicks on a link. Those links are loaded from database using PHP with this code:
<div class="panel-group" id="accordion">
<?php
$v_units = $courses->get_distinct_unit($id);
foreach ($v_units as $v_unit) { ?>
<div class="panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collpase<?php echo $v_unit['unit_id'];?>"><?php echo $v_unit['unit_id'] . ' - ' . $v_unit['unit_name']; ?></a>
</h4>
</div> <!-- End of .panel-heading-->
<div id="collpase<?php echo $v_unit['unit_id'];?>" class="panel-collapse collapse in">
<div class="panel-body">
<?php $v_vids = $courses->get_unit_video($v_unit['unit_id']); ?>
<?php foreach ($v_vids as $v_vid): ?>
<a class="show-vid-modal" href="<?php echo $v_vid['vid_link']; ?>"><?php echo $v_vid['vid_title'] ?></a>
<?php endforeach ?>
</div> <!-- End of .panel-body -->
</div> <!-- End of .panel-collapse -->
</div> <!-- End of .panel-default-->
<?php }?>
</div> <!-- End of #accordion-->
The a class="show-vid-modal" ... triggers the modal.Modal's title and video link is fetched through PHP for each item.
I have added the following javascript code.
<script>
$('.show-vid-modal').click(function(e) {
e.preventDefault();
$("#vid-modal").on('show.bs.modal', function(e) {
$("h4 #modal-title").text("<?php echo $v_vid['vid_title'];"?>);
$("div .modal-video").innerHTML = "<iframe src="<?php echo $v_vid['vid_link'];?>" "
});
$("#vid-modal").modal();
});
</script>
However, it only shows the title and video of the last item for every item (as the foreach loop ends). If I put the javascript inside foreach loop, then it will not work.
Can anyone give me an idea on how I should do that.

Answer 1

In your modal, put an id for the iframe, so it'll be:
<iframe id="video-frame" src=""></iframe>
In your link, create a custom attribute, let's say video-src, so it'll be:
<a class="show-vid-modal" href="#" video-src="<?php echo $v_vid['vid_link']; ?>"><?php echo $v_vid['vid_title'] ?></a>
Once you have it, put in your button's click function:
$('.show-vid-modal').click(function(e) {
//here the attribute video-src is helpfull
var vid-src = $(this).attr('video-src');
var title = $(this).html();
e.preventDefault();
$("#vid-modal").on('show.bs.modal', function(e) {
$("h4 #modal-title").text(title);
//here the id for the iframe is helpfull
$('#video-frame').attr('src', vid-src);
});
$("#vid-modal").modal();
});
It might work.