Sami Shammah Sami Shammah - 1 month ago 7
Ajax Question

JavaScript Neutralizes after Ajax Action

i am trying to run a script on a youtube video appears after ajax action to control it but as soon ajax load the youtube iframe it come but without any javascript affection :


with this code it works :


<iframe id="player" width="80%" height="80%" src="https://www.youtube.com/embed/sREemKFBJX8?enablejsapi=1&autoplay=1"></iframe>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('player').style.borderColor = '#FF6D00';
}
function changeBorderColor(playerStatus) {
var color;
if (playerStatus == -1) {
color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
color = "#FF6DOO"; // video cued = orange
}
if (color) {
document.getElementById('player').style.borderColor = color;
}
}
function onPlayerStateChange(event) {
changeBorderColor(event.data);
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>


but when i use Ajax the javascript stop working :


index.php


<div id="main_div"></div>
<button class="button">Show Player</button>
<script>
$(document).on('click', '.button', function (){
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
xmlhttp = false;
}
} else {
// code for IE6, IE5
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("main_div").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "ajax/load_player.php", true);
xmlhttp.send(null);
});
</script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('player').style.borderColor = '#FF6D00';
}
function changeBorderColor(playerStatus) {
var color;
if (playerStatus == -1) {
color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
color = "#FF6DOO"; // video cued = orange
}
if (color) {
document.getElementById('player').style.borderColor = color;
}
}
function onPlayerStateChange(event) {
changeBorderColor(event.data);
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>



load_player.php


<iframe id="player" width="80%" height="80%" src="https://www.youtube.com/embed/sREemKFBJX8?enablejsapi=1&autoplay=1"></iframe>

Ben Ben
Answer

The problem is that the api is loaded and the onYouTubeIframeAPIReady event with code for instanciating the player is called before the actual iframe is present. In the following fiddle i changed your code so that also creating the player instance is bound to the button click (so that the instance is created AFTER the iframe is loaded and AFTER the api is loaded)

onYouTubeIframeAPIReady() :

var ytready = false;
function onYouTubeIframeAPIReady() {
    ytready = true;
}

after the Ajax call:

xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("main_div").innerHTML = xmlhttp.responseText;
                player = new YT.Player('player', {
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    }; 

https://jsfiddle.net/0y7sedpx/3/

Comments