JQuery and PHP for dynamically created elements

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. :-(

The javascript will simplify to var $alleVideos = $(".box_body_iframe").hide(); $(".box_title_video").on('click', function() { $alleVideos.hide().filter($(this).next()).show(); }); There seems to be no point in adding removing active. — Roamer-1888
– Roamer-1888, Commented Mar 21, 2015 at 13:43

jeroen · Accepted Answer · 2015-03-22 09:10:12Z

2

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.

edited Mar 22, 2015 at 9:10

answered Mar 21, 2015 at 13:23

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Olivia P. Over a year ago

Hello @Jeroen thank you very much . I tried to do what you suggest me, now it looks much better , the problem is now that the first navigation shows the second added video and the second navigation ignores the first video and shows no videos. this is how i wrote the shortcode in wp-admin pages: [videos filme="nFiNSbycNRM, 7PnRkyu0HTs" title1="reborn" title2="trailer"] . i don't know where the problem is now.... :-S hier one picture from what i mentioned

Olivia P. Over a year ago

hier a example how the browser interpret it and what i mean from what i mentioned: '<div id="mobil_content"> <div class="box"> <div class="box_title_video"> <div class="box_body_iframe active" style="display: block;"> <iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="youtube.com/embed/7PnRkyu0HTs"> </div> </div> <div class="box"> <div class="box_title_video"> <div class="box_body_iframe" style="display: none;"> <iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="youtube.com/embed"> </div> </div> </div>'

jeroen Over a year ago

@NardaP You should add your modified code and html output below the original code so that we can see what it looks like now.

Olivia P. Over a year ago

thank you very very much!!! i'm a beginner by Web Development and i see that i have too practice more with loops....

Collectives™ on Stack Overflow

JQuery and PHP for dynamically created elements

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related