JQuery and PHP for dynamically created elements - php

Question

Can somebody pls help me?
I'm currently working on a dynamic website. I have 2 navigations points and I have a video window on the right side. By clicking on one navigation point the respective video should appear in the video window. The problem is: my navigation list will be created dynamically and the video appearance as well (in this case the urls videos will be embedded from Youtube). Here is my PHP code where the list of navigation points will be created dynamically:
function reborn_videos($attribute){
ob_start();
$urls = $attribute['filme'];
$urls = explode(',', $urls);
?>
<div id="mobil_content">
<?php for($i=1; $i<= count($urls); $i++) {
$movie_title = $attribute['title'.$i];
?>
<div class="box">
<div class="box_title_video"><a class="expand"><?php echo $movie_title; ?> </a></div>
<?php foreach ($urls as $url) { ?>
<div class="box_body_iframe">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo trim($url); ?>" frameborder="0" allowfullscreen></iframe>
</div>
<?php } ?>
</div>
<?php } ?>
here is what i changed and looks right now:
function reborn_videos($attribute){
ob_start();
$urls = $attribute['filme'];
$urls = explode(',', $urls);
?>
<div id="mobil_content">
<?php for($i=1; $i<= count($urls); $i++) {
$movie_title = $attribute['title'.$i];
?>
<div class="box">
<div class="box_title_video"><a class="expand"><?php echo $movie_title; ?></a></div>
<div class="box_body_iframe">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo trim($urls[$i]); ?>" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<?php } ?>
and here the JQuery that I want to use to show and hide my videos:
var $alleVideos = $(".box_body_iframe");
function showVideos() {
$alleVideos.each(function(){
if ( $(this).hasClass('active') ) {
$(this).show();
} else{
$(this).hide();
}
});
}
$alleVideos.hide();
$(".box_title_video").click(function(){
$alleVideos.removeClass('active');
$(this).next().addClass('active');
showVideos();
});
in JQuery code i have no changes
this is how the Browser output the html code:
<div id="mobil_content">
<div class="box">
<div class="box_title_video">
<a class="expand">reborn</a>
</div>
<div class="box_body_iframe" style="display: none;">
<iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="https://www.youtube.com/embed/7PnRkyu0HTs">
</div>
</div>
<div class="box">
<div class="box_title_video">
<a class="expand">trailer</a>
</div>
<div class="box_body_iframe active" style="display: block;">
<iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="https://www.youtube.com/embed/">
</div>
</div>
</div>
The problem is: the JQuery animation just shows one and always the same video in the video window. :-(

Answer 1

The problem seems to be that you have a loop in your loop and both loops loop over all your urls:
for($i=1; $i<= count($urls); $i++)
...
foreach ($urls as $url)
So in every entry in the outer loop, you generate a list will all your videos. And you activate the first one of that list every time with $(this).next().addClass('active'); so you will always show the same, first, video.
You can probably solve your problem by replacing the inner loop with just the current item: $urls[$i]:
<div class="box_title_video"><a class="expand"><?php echo $movie_title; ?> </a></div>
<div class="box_body_iframe">
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/<?php echo trim($urls[$i]); ?>"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
Edit: I just noticed that your loop runs form 1 and arrays are zero-indexed, so you would need:
... src="https://www.youtube.com/embed/<?php echo trim($urls[$i - 1]); ?>" ...
^^^^^^^ here
Now you correctly show two blocks but as you can see in the second video, there is no url.