Run javascript after AJAX is finished

Question

I am using an ajax call to load mycontent.php into my modal dialog box. I am using AJAX, but the 3 javascript tags are not being included or being executed in the mycontent.php when it is in the modal window.

I have tried the eval statement but doesn't seem to work.

Here is my code:

main.html

 <a class="dialog" title="testvideo" href="mycontent.php">
 <img class="imageleft" width="200" height="150" src="assets/images/photos/deya/thumbnail.jpg"></a>

modal.js

    $(document).ready(function() {                

       $('a.dialog').click(function (event) {
          if ($("body").hasClass("res-full")){
             event.preventDefault();
             $this = $(this);

             var URL     = $(this).attr('href');
             var dialogbox = document.getElementById('dialog');
             var dialogOptions = {
                        height: 'auto',
                        width: 'auto',
                        modal: true,

              //         open: function(event, ui){

              //         },

                       close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

       if(dialogbox==null) {
          $this.after("<div id=\"dialog\"></div>");
       }

       jQuery('#dialog').load(URL + " #content", function() {eval($('script').html())}).dialog(dialogOptions);


      }            
      });


    });

mycontent.php

   <div id="content">
       <div id="VidPlayerPlaceholder_7001_wrapper">
        <object id="VidPlayerPlaceholder_7001" width="100%" height="100%" type="application/x-shockwave-flash" data="video/player/player6.swf" bgcolor="#000000" name="VidPlayerPlaceholder_7001" tabindex="0">
        <div id="VidPlayerPlaceholder_7001_jwpsrv" style="position: absolute; top: 0px; z-index: 10;"></div>
   </div>
   <script type="text/javascript" src="http://www.mycompany.com/video/player/js/jwplayerv6.js"></script>
   <script type="text/javascript">jwplayer.key="jCz8k6TcT9i6M5vRXEI474+6dfNf9a7gHBbRfA==";</script>
   <script type="text/javascript">
          jwplayer('VidPlayerPlaceholder_4029').setup({ 
                    flashplayer: "http://www.company.com/video/player/player6.swf",
                    html5player: "http://www.company.com/video/player/js/jwplayer.html5.js",
                    playlist: [
            { image: "http://pciture.jpg", file: "rtmp://DEYA/video3.m4v"}
        ],
        width: '505',
        height: '430',
        stretch: 'uniform',
        autostart: 'false',
        repeat: 'false',

        logo: {
            file: 'http://ccopyright.png',
            link: 'http://www.mycompany.ca',
            hide: '',
            position: 'top-left'
        },
        rtmp: {
            bufferlength: '5'
        },
        primary: 'html5'
        });
        jwplayer('VidPlayerPlaceholder_4029').setVolume(50);
        if(0 > 0){
            jwplayer('VidPlayerPlaceholder_4029').stop();       
            jwplayer('VidPlayerPlaceholder_4029').seek(0);      
            if('false' == 'false'){
                jwplayer('VidPlayerPlaceholder_4029').pause();
            }
    }
</script> 

If anyone could help, that would be appreciated.

Answer 1

You are calling load with URL + " #content". Adding a selector after the URL makes jQuery use just that part of the page and ignore the rest of it. So, your <script> tags are never loaded into the DOM nor are they available in the callback.

Try using $.get to get the entire page, then put each piece where it belongs.

$.get(url, function(html){
    // Parse HTML response
    var $data = $(html);

    // Add content to DOM
    $('#dialog').html($data.filter('#content').html());

    // Run scripts
    $data.filter('script').each(function(){
        // http://stackoverflow.com/a/12201713/206403
        var scriptTag = document.createElement('script');
        scriptTag.text = $(this).html();
        document.body.appendChild(scriptTag);
    });

   // Open dialog
   $('#dialog').dialog(dialogOptions);

}, 'html');

Answer 2

As i mentioned in the comments you could try doing it this way, I just built on Rocket Hazmat's answer - but replaced the fragment div with the implementation jquery uses for its load() with the #fragmentdiv param.

Now what you'll also want to do is call your jwplayer inside the success function (done()), paste in the JS for your jwplayer setup (the inline JS) you have from your php file into the done() function as commented below - and see if that works.

(function($) { //wrap to local scope
    $(document).ready(function() {
        var fragment_div = '#content';
        var $target_div = '#dialog';

        $.ajax({
            url: url,
            dataType: 'html' //IE can be buggy on the jquery intelligent guess
        }).done(function(data) {
            var content = $('<div>').append($.parseHTML(data)).find(fragment_div);
            $('#dialog').html(content);

            //try
            $target_div.html($data.filter('script'));
            //or
            $target_div.html($('<script>').append($.parseHTML(data)).find('script');

           //try moving your jwplayer setup code here for testing, you can use bind() and trigger()
           //to create a custom event if you want to keep the js as you have it now in mycontent.php
           jwplayer('VidPlayerPlaceholder_4029').setup({ /*..etc */ });

           // Open dialog
           $('#dialog').dialog(dialogOptions);
        });
    });
})(jQuery);

EDIT is there any extra content in your .php? If not you could just use .load() without the #fragment param. That will load the javascript aswell.

Answer 3

Put the javascript on mycontent.php in a function, then you can call that function from the main.html when .load() completes. Read more about the onComplete functionality of .load() on http://api.jquery.com/load/