I am trying to debug my problem. I have imported a library a co-worker has written that will extract YouTube URLs from a playlist. Once this library is finished the extraction process, it will fire the event playlistDone and place the YouTube URLs in the object OBJ.youtube.videos. Since my website is very large and complex, I have tested this library on a blank website to verify that it is working.
$(document).on('playlistDone', function() {
console.log( 'done' );
console.log( OBJ.youtube.videos );
});
When I move this code above to my website, the console acknowledges the playlistDone custom event, but reports that OBJ.youtube.videos is undefined. Can anyone provide any advice as to why this is happening?
Sample of the blank page I used for testing:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div>
<h1>Video</h1>
<div id="player" style="width:650px; height:400px;"></div>
<hr />
<div style="width:650px; height:80px; border:solid 2px #e8e; overflow:horizontal" id="thumbnails"></div>
</div>
<script src="youtube-playlist-lib.js?playlistId=PLA249A8D68B9C95F7&dom=player&thumbnails=thumbnails"></script>
<script type="text/javascript">
$(document).on('playlistDone', function() {
console.log( 'done' );
console.log( OBJ.youtube.videos );
});
</script>
</body>
</html>
Turns out that there was nothing wrong with the code at all. Instead, Chrome was caching an older version of the library.