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

Ajax display of new galleries - TP Pro


  • Please log in to reply
8 replies to this topic

#1 Tone

Tone

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 02 April 2011 - 12:51 PM

Eric,

Love the new interactive search feature!!

Is there a way to show different galleries from javascript without loading the whole page? Essentially, what I want to do is show different YT playlists based on various onclick() functions on my webpage, and have the new results appear via Ajax instead of a full page load. I figure, if the interactive search form can do it, my own forms or other js triggered actions can also do it.

I tried the most obvious route:

print tubepressGallery("mode=playlist output=ajaxSearchInput searchResultsDomId=#somediv searchProvider=youtube);

but the addition of "mode=playlist" had no effect. I would input a Playlist ID # and get back no results. I then tried entering relevant tags into the search box, and got the usual results, just as if I had not added "mode=playlist" into the tubepressGallery(...) function call.

Guess I can try to further study the code for the interactive search form, but if you've got an easy explanation, so much the better. I've reviewed sys/ui/themes/default/search/ajax_search_input.tpl.php in the hopes of creating a new theme to support playlist Ajax searching, but I can't figure out how the default theme's ajax search forces a "mode=tag" search, as I'd prefer a "mode=playlist" search in Ajax. Maybe you can explain how the default theme Ajax search code forces a "mode=tag" search?

Thanks,

Tony

#2 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 05 April 2011 - 12:25 PM

Hi Tony,

Sorry it took me a while to respond to your post - I was trying to think of the simplest and most upgrade-proof solution that would work for you. I think that instead of digging too much under the hood of how TubePress handles ajax searching, you should instead take a look at /sys/scripts/ajax/shortcode_printer.php. This file, which won't change for the foreseeable future, is actually quite powerful for ajax operations - in fact both ajax search and ajax pagination make use of it.

It's also easy to use. Just add a URL encoded TubePress shortcode and supply it via the "shortcode" query param. e.g. to spit out a gallery for the shortcode

[tubepress mode="user" userValue="3hough"]
you can make a request to

http://tubepress.com/wp-content/plugins/tubepress_pro_2_2_0/sys/scripts/ajax/shortcode_printer.php?shortcode=%5Btubepress%20mode%3D%22user%22%20userValue%3D%223hough%22%5D

In your case, let's say we want to asynchronously load a playlist when a user clicks something. Pretend that the playlist ID is embedded into the "rel" attribute of the element they click. There's a bunch of ways to do this, but here's what I came up with off the top of my head:
<span id="something" rel="1234">Load this awesome gallery</span>
<div id="gallery" />

<script type="text/javascript">
jQuery("#something").click( function () {
   var id = jQuery(this).attr('rel'), shortcode = '[tubepress mode="playlist" playlistValue="' + id + '"]';

   TubePressAjax.loadAndStyle(getTubePressBaseUrl() + '/sys/scripts/ajax/shortcode_printer.php?shortcode=' + encodeURIComponent(shortcode), '#gallery', null, null, safeTubePressInit);

   return false;
});
</script>
Disclaimer: I haven't tested this code, so it could have syntax errors, but it looks OK to me. And again, you don't have to use TubePressAjax.loadAndStyle if you don't want to; jQuery.load() will also work fine.

Hope this makes sense?

#3 Tone

Tone

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 05 April 2011 - 03:19 PM

OK help me out here....

// $the_playlist is set to a valid youtube playlist, i.e. something like: FC2728CA0DBDED5D

<div id="tp_container">
<?php
print tubepressGallery("mode=playlist playlistValue=" . $the_playlist .
       " theme=youtube resultsPerPage=18 ajaxPagination=true playerLocation=fancybox embeddedWidth=100% embeddedHeight=100% filter_racy=false hd=true fullscreen=true embeddableOnly=true"); 
?>
</div>

<form>
	<fieldset class="tubepress_search">
	<input type="text" id="tubepress_search" name="tubepress_search" class="tubepress_text_input" />
		<button class="tubepress_button" title="Find Playlist"><?php echo 'Find Playlist'; ?></button>
	</fieldset>
</form>

<script type="text/javascript">
    var id = jQuery("#tubepress_search").text, shortcode = '[tubepress theme=youtube resultsPerPage=18 ajaxPagination=true playerLocation=fancybox filter_racy=false hd=true fullscreen=true embeddableOnly=true mode="playlist" playlistValue="' + id + '"]';

	jQuery('#tubepress_search').siblings('button').click(function () {
		TubePressAjax.loadAndStyle(getTubePressBaseUrl() + '/sys/scripts/ajax/shortcode_printer.php?shortcode=' + encodeURIComponent(shortcode), '#tp_container', null, null, safeTubePressInit);
		return false;
	});
</script>

On page load, everything is dandy, but when I search with this little form, I don't get the playlist I choose in the form (get some other unrelated group of videos), but more importantly, I don't get any of the parameters I've set in the shortcode: fancybox, resultsPerPage, ajaxPagination, etc...

I'm sure I'm doing something stupid, but I'm not seeing it.

#4 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 07 April 2011 - 04:57 PM

Hmm that code looks right to me as well. Do you have this posted somewhere that I could take a first-hand look?

If not, here's what I would do to troubleshoot. Use Firebug (or the like) to capture the exact URL that jQuery is requesting (... /shortcode_printer.php?...). Then I'd open that URL in a new tab and add tubepress_debug=true to the end of the query string. At that point TubePress will spill its guts in terms of why it's sending back the wrong videos.

#5 Tone

Tone

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 07 April 2011 - 07:31 PM

Eric,

Keepin' it simple: http://tp.vrtifacts.com/tpajax.php

Try entering a valid playlist like: 546BEB63838DE0BC which should reveal this playlist:

The entire code (not including the TP library):

<?php
$tubepress_base_url = "tubepress_pro";
include "tubepress_pro/env/pro/tubepress-pro.php";
?>

<html>
    <head>
        <title>TubePress Pro</title>
        <?php print TubePressPro::getHtmlForHead(true); ?>
    </head>
    <body>
        <form>
            <fieldset class="tubepress_search">
                <input type="text" id="tubepress_search" name="tubepress_search" class="tubepress_text_input" />
                <button class="tubepress_button" title="Find Playlist"><?php echo 'Find Playlist'; ?></button>
            </fieldset>
        </form>
        <script type="text/javascript">
            var id = jQuery("#tubepress_search").text, shortcode = '[tubepress theme=youtube resultsPerPage=18 ajaxPagination=true playerLocation=fancybox filter_racy=false hd=true fullscreen=true embeddableOnly=true mode="playlist" playlistValue="' + id + '"]';

            jQuery('#tubepress_search').siblings('button').click(function () {
                TubePressAjax.loadAndStyle(getTubePressBaseUrl() + '/sys/scripts/ajax/shortcode_printer.php?shortcode=' + encodeURIComponent(shortcode), '#tp_container', null, null, safeTubePressInit);
                return false;
            });
        </script>
        <div id="tp_container">
            <?php
            $the_playlist = "FC2728CA0DBDED5D";
            print tubepressGallery("mode=playlist playlistValue=" . $the_playlist .
                            " theme=youtube resultsPerPage=18 ajaxPagination=true playerLocation=fancybox embeddedWidth=100% embeddedHeight=100% filter_racy=false hd=true fullscreen=true embeddableOnly=true");
            ?>
        </div>          
    </body>
</html>

And looking in Firebug, the request that gets set back to the server is:

http://tp.vrtifacts.com/tubepress_pro/sys/scripts/ajax/shortcode_printer.php?shortcode=%5Btubepress%20theme%3Dyoutube%20resultsPerPage%3D18%20ajaxPagination%3Dtrue%20playerLocation%3Dfancybox%20filter_racy%3Dfalse%20hd%3Dtrue%20fullscreen%3Dtrue%20embeddableOnly%3Dtrue%20mode%3D%22playlist%22%20playlistValue%3D%22function%20(a)%20%7B%0A%20%20%20%20if%20(d.isFunction(a))%20%7B%0A%20%20%20%20%20%20%20%20return%20this.each(function%20(b)%20%7Bvar%20c%20%3D%20d(this)%3Bc.text(a.call(this%2C%20b%2C%20c.text()))%3B%7D)%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(typeof%20a%20!%3D%3D%20%22object%22%20%26%26%20a%20!%3D%3D%20b)%20%7B%0A%20%20%20%20%20%20%20%20return%20this.empty().append((this%5B0%5D%20%26%26%20this%5B0%5D.ownerDocument%20%7C%7C%20c).createTextNode(a))%3B%0A%20%20%20%20%7D%0A%20%20%20%20return%20d.text(this)%3B%0A%7D%22%5D

As always... thanks for your patience with us morons!

Tony

#6 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 10 April 2011 - 03:32 PM

thanks for your patience with us morons!


Are you kidding?! It's a pleasure working with folks like you that have patience and are willing to get their hands dirty with the techy stuff. I should definitely be the one thanking you.

So the issue appears to be a simply typo in the definition of the "id" variable, which in turn messes up the shortcode that is sent via ajax. Change this

var id = jQuery("#tubepress_search").text, ...
to
var id = jQuery("#tubepress_search").val(), ...

This will send the right shortcode and thus should load the right videos. If we're lucky that will be the last thing we'll have to do...

#7 Tone

Tone

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 10 April 2011 - 06:22 PM

Yup, I had tried that, and have now left the code with your suggested revision installed.

Now the behavior is:

1. It finds the first playlist I search for and displays the thumbnails, but...
2. Also prints a warning at the bottom of the page:
Warning: Cannot modify header information - headers already sent by (output started at /home/tone/public_html/tp/tubepress_pro/sys/scripts/ajax/shortcode_printer.php:26) in /home/tone/public_html/tp/tubepress_pro/sys/scripts/ajax/shortcode_printer.php on line 29
3. Further searches result in the same playlist thumbs and the same warning, whether I type in a valid playlist number, or just gobblydegook.
4. If I reload the whole page, I get one more search (with error), then the same behavior as #3 above.

You can try it yourself at the same URL.

Commenting out line 29 in shortcode_printer.php gets rid of the error message, but I can still only do one search, as the val() being passed back by is the number of the first search playlist, regardless of what I type, the results are always the same as the first search.

/* some servers won't set this explicitly */
// header('HTTP/1.0 200 OK');

Sorry....

#8 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 12 April 2011 - 11:42 PM

OK, we're almost there! I wouldn't worry too much about line 29 (the 200 header setting) as it's actually a leftover line from older versions. You can leave it commented out, especially since it quiets down that error message.

I think the problem with the "first search only" is just due to some JavaScript scoping. Try moving the shortcode declaration to inside the click handler. So instead of

var id = jQuery("#tubepress_search").val(), shortcode = '[tubepress theme=youtub ...

jQuery('#tubepress_search').siblings('button').click(function () { 

   TubePressAjax.loadAndStyle(getTubePressBaseUrl() + ...
you'll want

jQuery('#tubepress_search').siblings('button').click(function () { 

   var id = jQuery("#tubepress_search").val(), shortcode = '[tubepress theme=youtub ...
 
   TubePressAjax.loadAndStyle(getTubePressBaseUrl() + ...
I think that should clear it up. Let me know, and thanks for your continued patience!

#9 Tone

Tone

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 13 April 2011 - 03:38 PM

Shoulda seen the scoping issue myself. Doh! Yup, that works just fine. And now back to our regularly scheduled programming...

For the record, here's the complete code for a standalone AJAX based playlist searching web page in 33 lines:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
$tubepress_base_url = "tubepress_pro";
include "tubepress_pro/env/pro/tubepress-pro.php";
?>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
        <title>TubePress Pro</title>
        <?php print TubePressPro::getHtmlForHead(true); ?>
    </head>
    <body>
        <form>
            <fieldset class="tubepress_search">
                <input type="text" id="tubepress_search" name="tubepress_search" class="tubepress_text_input" />
                <button class="tubepress_button" title="Find Playlist"><?php echo 'Find Playlist'; ?></button>
            </fieldset>
        </form>
        <script type="text/javascript">

            jQuery('#tubepress_search').siblings('button').click(function () {
                
                var id = jQuery("#tubepress_search").val(), shortcode = '[tubepress theme=youtube resultsPerPage=18 ajaxPagination=true playerLocation=fancybox filter_racy=false hd=true fullscreen=true embeddableOnly=true mode="playlist" playlistValue="' + id + '"]';
                TubePressAjax.loadAndStyle(getTubePressBaseUrl() + '/sys/scripts/ajax/shortcode_printer.php?shortcode=' + encodeURIComponent(shortcode), '#tp_container', null, null, safeTubePressInit);
                return false;
            });
        </script>
        <div id="tp_container">
            <?php
            $the_playlist = "FC2728CA0DBDED5D";
            print tubepressGallery("mode=playlist playlistValue=" . $the_playlist .
                            " theme=youtube resultsPerPage=18 ajaxPagination=true playerLocation=fancybox embeddedWidth=100% embeddedHeight=100% filter_racy=false hd=true fullscreen=true embeddableOnly=true");
            ?>
        </div>         
    </body>
</html>

Gotta now generalize this for all TP shortcode parameters. Great interactive tool!