0

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>
2
  • $('video').get(0) returns the first video element. If none exists, .get(0) will return undefined. Hence $('video').get(0).play(); will error if no video element exists. Commented Jun 1, 2013 at 23:31
  • You "filter" #postvideo by 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 ?). Commented Jun 1, 2013 at 23:32

2 Answers 2

1

you need to show a sample HTML $('video').get(0).play();

Do you have this tag <video> if you don't have this tag in your HTML code, $(video) will be undefined, and get(0) undefined, and calling play function on an undefined object will cause the error you saw.

If you video tag is created dynamically in your page, I suggest you learn about jQuery live() function. http://api.jquery.com/live/

Sign up to request clarification or add additional context in comments.

5 Comments

$'(video') will never be undefined and .live was removed in jQuery 1.9. Anyways, event delegation wouldn't help here.
@FelixKling - Nope, but $('video').get(0) would be undefined ?
you are right, live() is removed from v1.9, replaced by on() function
This sounds promising. The Ajax div does not have the video element until another script changes it's element designation, after which the script above handles the video element. Don't the different scripts execute sequentially rather than simultaneously?
The video element not existing was breaking the script. Will have to figure out a different way to have the video play automagically.
1

try to use with all your click listeners

     $(document).on('click','#your_div',function(){
});

For exemple

 $(document).on('click','.closeUp',function(){          $("#fold-above").empty().fadeToggle();
        });

2 Comments

maybe when the div loaded the listener can't know that div ... so with using this we can set dynamically a listener ad many problems solved ... this my way of using jquery ... if you loaded a div and a listner setted before his loaded this listener never work ...
The code that causes problems is not even triggered through an event handler. Event delegation is not a silver bullet, it does not solve every problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.