I'm loading an Ajax div on a click from within an already loaded element (button), but when that Ajax div is loaded, the jQuery script isn't running.
The script is all running within Wordpress, so there is a noConflict wrapper.
Included in the sample code are a few ways to get rid of a div that is loaded within the Ajax div container, solely because I'm not sure if my syntax is correct or if the script is just not loading.
In the sequence of events for the jQuery script, it does ask to play a video element, but wouldn't that just run, but not do anything if the element isn't there? Or is this what's breaking the script when there is no video element?
The chrome console error after opening an Ajax container who's src is not .m4v:
Uncaught TypeError: Cannot call method 'play' of undefined
<script type="text/javascript">
// design and manage behavior of video/audio control bar
jQuery(function($){
$(document).ready(function() {
$.ajaxSetup({ cache: false });
var video = document.getElementById("postvideo");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");
var seekBar = document.getElementById("seek-bar");
// remove media player elements if element is not an m4v
$('#postvideo[src$=".jpg"]').remove(".controlbar").remove(".postMedia");
$('#postvideo[src$=".m4v"]').remove(".controlbar");
// elements whose src doesn't end with `.m4v`
$('#postvideo').not('[src$=".m4v"]').empty().each(function() {
if ($('.postMedia').length) {
// move postMedia to root of #fold-above
$('.postMedia').detach().prependTo($('#fold-above'));
$('video').get(0).play();
} else {
$('.controlbar').remove();
$('.postMedia').remove();
}
});
// button to show or hide the post text content
$(".showText").click(function(){
$(".ajaxPostText").fadeToggle('fast');
$(".ajaxPostTitle").fadeToggle('fast');
$(".aboveTheFold .postmetadata").fadeToggle('fast');
$(".controlbar").fadeToggle('fast');
});
// button to close entire post viewer panel
$('.closeUp').click(function(){
$("#fold-above").empty().fadeToggle();
});
$(".play-pause").click(function(){
if (video.paused == true) {
video.play();
playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/playButton.png' />";
} else {
video.pause();
playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/pauseButton.png' />";
}
});
$(".mute").click(function(){
if (video.muted == false) {
video.muted = true;
muteButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/volumeButton2.png' />";
} else {
video.muted = false;
muteButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/volumeButton1.png' />";
}
});
$(".full-screen").click(function(){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
seekBar.addEventListener("change", function() {
var time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
video.addEventListener("timeupdate", function() {
var value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
});
});
</script>
$('video').get(0)returns the firstvideoelement. If none exists,.get(0)will returnundefined. Hence$('video').get(0).play();will error if novideoelement exists.#postvideoby src etc, it's an ID and it should be unique (there could be other reasons for the filtering, but it looks a lot like you have mutliple video elements with the same ID ?).