I have an HTML-page that is injecting code from a PHP/MySQL setup with this code:
<div id="inject">Let AJAX change this text.</div>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("inject").innerHTML = this.responseText;
}
};
xhttp.open("GET", "../../php-test.php", true);
xhttp.send();
}
loadDoc();
</script>
I'm doing this to construct a list of podcasts. In the injected code is included this audio:
<audio controls>
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
<a href="http://www.w3schools.com/html/horse.mp3">horse</a>
An html5-capable browser is required to play this audio.
</audio>
I'm calling jquery + bootstrap + the player's script, but i can't seem to get it working on the injected code. I've tried to call the code several places (with defer on the parent, inside the injected code with the img/onload-trick, etc. etc.) It works perfectly if i simply place the ‹audio› above in the parent document (with no inject). I want to be able to use AJAX to make the audio-tracks since the amount of players are dependant on my PHP/MySQL. How to make the script affect the ‹audio›? The funny thing is, that the accordion (part of bootstrap.js), i'm using for the layout is working just fine in the injected code. Also the problem is browser-dependent where Safari works ok, while Chrome and Firefox doesn't work. Please ask for further details.