Cannot load data from PHP + JQuery to Bootstrap 3 Modal

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">&times;</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.