Jump to content


These Forums Are Now Read-Only


For TubePress support, please post a question here or open a support ticket and we will be glad to assist.


Photo

Loading A Tubepress Page With Ajax

wordpress tubepress-pro performance tips youtube

  • Please log in to reply
5 replies to this topic

#1 45Press

45Press

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 28 July 2013 - 12:58 PM

I have a WordPress project that I am currently working on that loads all of the sites pages via AJAX calls. Most plugins require their scripts to be re-loaded on Ajax Success to work, and I was able to figure out which scripts need re-loaded for all of the plugins that I am using besides TubePress pro. 

 

I tried re-loading the JS in the plugin folder under 

tubepress_pro_3_0_1/src/main/web/js/tubepress.js

, but the thumbnails and other functions of the plugin are not working. The page obviously works fine when loaded without ajax. Am I missing something?

 

Thanks!



#2 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 29 July 2013 - 06:25 PM

Joel,

 

One of our developers is looking into this and someone will respond with an answer for you soon.

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#3 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 30 July 2013 - 09:48 AM

I have a WordPress project that I am currently working on that loads all of the sites pages via AJAX calls. Most plugins require their scripts to be re-loaded on Ajax Success to work, and I was able to figure out which scripts need re-loaded for all of the plugins that I am using besides TubePress pro. 

 

I tried re-loading the JS in the plugin folder under 

tubepress_pro_3_0_1/src/main/web/js/tubepress.js

, but the thumbnails and other functions of the plugin are not working. The page obviously works fine when loaded without ajax. Am I missing something?

 

Thanks!

 

Could you try upgrading to TubePress 3.1.1 and see if that fixes the issue? If not, please send along a link to your site and we'll take a closer look. Thanks!



#4 45Press

45Press

    Newbie

  • Members
  • Pip
  • 6 posts

Posted 30 July 2013 - 11:35 PM

Upgrading did not fix the issue.

 

Link to the site in progress: http://projects.45press.com/cash



#5 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 05 August 2013 - 11:23 AM

After investigation, I discovered why TubePress isn't working when loaded via Ajax. Here's the technical explanation...

 

If you examine the HTML source of http://projects.45pr...com/cash/video/, you'll see that TubePress appends to each of its galleries a little JavaScript to initialize that particular gallery. e.g.

<script type="text/javascript">
   var tubePressDomInjector = tubePressDomInjector || [], tubePressGalleryRegistrar = tubePressGalleryRegistrar || [];
       tubePressDomInjector.push(['loadGalleryJs']);
       tubePressGalleryRegistrar.push(['register', '2142447596', {"nvpMap":{"embeddedHeight":"350","embeddedWidth":"425","playerLocation":"normal","galleryId":2142447596},"jsMap":{"playerLocationJsUrl":"http:\/\/projects.45press.com\/cash\/wp-content\/plugins\/tubepress_pro_3_1_1\/src\/main\/web\/players\/normal\/normal.js","playerLocationProducesHtml":true,"ajaxPagination":true,"fluidThumbs":true,"httpMethod":"GET","sequence":["eJlN9jdQFSc","Tr0Vt7E7U7w","tfp2O9ADwGk","WOHPuY88Ry4","VEyujOSEexM","GzChsjd4CzU","tfF5k1nbxgA","JpGdcg8TdVI","aGnG8XhoUR4","yE_K3ZmHHnU","SOisJKfyQdk","SNxeguRCeNw","1UyjQoRnz5w","K5YiXL_xGL0","aFkcAH-m9W0","9mVItCBuN78","TwSATziEJ4I","xf86xEUriRM","8QZCGPEMU9o","sIshqGWyTgA"],"autoNext":true}} ]);
</script>

Now, your particular theme is loading that same HTML via jQuery's Ajax, which automatically strips out any HTML <script> tags. The result is that while the HTML for the TubePress gallery shows up normally, there is no corresponding JavaScript to initialize the gallery properly. So why is jQuery stripping out the <script> tags? If you look at your theme's JavaScript, you'll see:

// Ajax content load
    function loadContent(url) {
		
        $('#main-content > *').fadeOut();
		
        $.ajax({
            url: url,
            success: function (responseHtml) {
                document.title = $(responseHtml).filter('title').text();
                $('#main-content').html($(responseHtml).find('#main-content > *'));
                $('#main-content > *').hide();
                $('#main-content > *').fadeIn();
                // Contact Form 7
                $.get('/cash/wp-content/plugins/contact-form-7/includes/js/scripts.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/js/ngg.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js');
                $.get('/cash/wp-content/plugins/tubepress_pro_3_1_1/src/main/web/js/tubepress.js');
            },
            error: function () {
                document.title = 'Johnny Cash | Error';
                $('#main-content').html('<div class="row"><div class="span12 text-center"><h3>Error</h3>An error has occurred while attempting to load the page.</div></div>');
                $('#main-content > *').hide();
                $('#main-content > *').fadeIn();
            }
        });
		
    }

What I would try is adding a "dataType" parameter to this code so that it looks like this:

// Ajax content load
    function loadContent(url) {
		
        $('#main-content > *').fadeOut();
		
        $.ajax({
            dataType: "html",
            url: url,
            success: function (responseHtml) {
                document.title = $(responseHtml).filter('title').text();
                $('#main-content').html($(responseHtml).find('#main-content > *'));
                $('#main-content > *').hide();
                $('#main-content > *').fadeIn();
                // Contact Form 7
                $.get('/cash/wp-content/plugins/contact-form-7/includes/js/scripts.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/js/ngg.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js');
                $.get('/cash/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js');
                $.get('/cash/wp-content/plugins/tubepress_pro_3_1_1/src/main/web/js/tubepress.js');
            },
            error: function () {
                document.title = 'Johnny Cash | Error';
                $('#main-content').html('<div class="row"><div class="span12 text-center"><h3>Error</h3>An error has occurred while attempting to load the page.</div></div>');
                $('#main-content > *').hide();
                $('#main-content > *').fadeIn();
            }
        });
		
    }

That should tell jQuery to include and parse the <script> tags (reference) and thus make TubePress work properly. Give it a try and let us know?

 

Thanks!


  • brandon likes this

#6 Caprium Demo

Caprium Demo

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 02 May 2014 - 04:24 AM

Hello TubePress  Staff,

 

I have same issue. Here i have used Advance-ajax-page-loader due to that my videos are not playing but when i refresh page then its work fine. I am unable to find out where is a problem and where i have to add dataType: "html", can you please check. Link: http://akwaaba.fm/videos/

 

Thanks,







Also tagged with one or more of these keywords: wordpress, tubepress-pro, performance, tips, youtube