JQuery, Freemasonry, JWPlayer, Infinite-Scroll Append "<script> </script>" Tags in PHP Include File do not work

Question

First I will provide a brief overview of what I am trying to accomplish.

I have a main PHP page that loads images, text and videos (which play with JWPlayer) from the mySQL database and uses freemasonry for the layout. I also use Infinite-Scroll, which loads additional content using the following code:

$container.masonry( 'appended', $newElems, true ); 

Additional content is loaded through a PHP page called loadMore.php

<nav id="page-nav">
<a href="loadMore.php?n=2"></a>
</nav>

In the above page lodeMore.php I load more information, images and videos from the database. If the item downloaded from the database is video, I try to display it using an include php file called " videoPlayer.php ". The code for this PHP include file is as follows:

<?PHP
echo"<div id='$i'>Loading the video player ...</div>
<script type='text/javascript'>
jwplayer('$i').setup({
    flashplayer: 'player.swf',
    image: '$imagePath',
    skin: 'images/slim.zip',
    width: 250,
    height: 141,
    plugins: {
            gapro: { accountid: 'UA-30548455-1'}
        },
    file: '$videoPath'
});
</script>";
?>

This file works great for video content, which is displayed when the main page loads for the first time , if it is loaded through add and loadMore. php , it does not display the above javascript for the player.

, append , <script> </script> , </script> append . , , script, <\/script> , .

- , append, <script></script> , !

• jwatts, , , :

  $(function(){
  var $container = $('#container');
  
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
      columnWidth: 295,
      isAnimated: !Modernizr.csstransitions,
      isFitWidth: true
    });
  });
  
  $container.infinitescroll({
    navSelector  : '#page-nav',    // selector for the paged navigation 
    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.box',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
  
      // hide new items while they are loading
      var $newElems = $( newElements ).css({ opacity: 0 });
      // ensure that images load before adding to masonry layout
      $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
  
        alert("test");
  
        //Find Image and Video Paths from Div tags
        $($newElems).find("div.content-container").each( function() {
          var imgpath = $(this).find("div.content-imgpath").text();
          var vidpath = $(this).find("div.content-vidpath").text();
          var id = $(this).find("div.content-id").attr("id");
          loadPlayer( id, imgPath, vidPath );
          });
  
        alert("test 2");
  
        //Hide Paths
        /*
        div.content-imgpath, div.content-vidpath {
          display: none;
          }
      */
  
  
      });
    }
  );
  

  });

, , , , , , , test , 2 , . , , - , , loadMore.php.

, ? javascript loadPlayer JWVideo .

Answer 1

, , jwplayer

function loadPlayer(id, imgPath, vidPath) {
  jwplayer(id).setup({
    flashplayer: 'player.swf',
    image: imgPath,
    skin: 'images/slim.zip',
    width: 250,
    height: 141,
    plugins: {
            gapro: { accountid: 'UA-30548455-1'}
        },
    file: vidPath
  });
}

HTML :

<div class="content-container">
   <div class="content-imgpath">path name here</div>
   <div class="content-vidpath">vid path here</div>
   <div class="content-id" id='$i'>Loading the video player ...</div>
</div>

, :

div.content-imgpath, div.content-vidpath {
   display: none;
}

masonry :

$($newElems).find("div.content-container").each( function() {
   var imgpath = $(this).find("div.content-imgpath").text();
   var vidpath = $(this).find("div.content-vidpath").text();
   var id = $(this).find("div.content-id").attr("id");
   loadPlayer( id, imgpath, vidpath );
});

: ...