[Plugin: Advanced AJAX Page Loader] Need help making WP YouTube Lyte compatible

I’m not familiar with Advanced Ajax Page Loader, I’m just the WP YouTube Lyte guy. That being said, there are two things that have to happen for WP YouTube Lyte to function:

1. lyte-min.js has to be loaded (normally included in wp-footer, but only if lyte player is present, so not loaded if not needed)
2. ly.te() has to be called (done automatically inside lyte-min.js)

So the problems you might be facing:

1. either lyte-min.js is not referenced/ loaded (you should see this in your favorite browser’s developer tools) in which case sourcing it in with javascript should do the trick
2. or lyte-min.js might already be loaded, but the ly.te() function should be called again for the new page that just got loaded.

hope this helps!
frank

I wasn’t in the country for a month, and I didn’t have time to care about the website. I was going to answer immediately, but I only found out I had to leave two days before, so I really couldn’t answer at that time. I was surprised to see you noticed this forum thread this easily. Is that because I tagged it “wp-youtube-lyte”?

When I visit the post’s URL directly, the video appears as expected, so Youtube Lyte is working correctly. However, when I navigate to the post by clicking a link within the website, it is loaded dynamically as static data (I suppose) by Advanced AJAX Page Loader, which means that JavaScript code indeed doesn’t execute (because all I get is blank).

So I “summon” the code in lyte-min.js by means of jQuery.getScript() which also executes it. This call has to be made by Advanced AJAX Page Loader after loading the post content, so I put that snippet of code in the “reload” section specifically created for that purpose in the plugin’s settings page on the WordPress admin panel… I tried calling ly.te() as well, and even on its own, without executing the whole script first. Nothing works ??

I examined the page and it seems the post’s content is still there in the HTML. However, the DIV having the ID=”content” has its LEFT property’s value set to 20000px (yes, four zeroes) in the element’s inline CSS style attribute value. Also, after the P paragraph elements, where the video should be, there are only two empty divs:

<div class="lyMe" id="WYL_oRnEsCYpfC0" style="width:480px;height:360px;overflow:hidden;"></div>
<div class="lL" style="width:480px;"></div>

And this is the opening tag of the WordPress “content” DIV:
<div id="content" role="main" style="display: block; position: absolute; left: 20000px; ">

You can see it by accessing the first (latest) article at indignat.socioblog.ro

Thank you for all of your help. I’ll keep trying to get it to work tomorrow most probably.

Just had a look at https://indignat.socioblog.ro/2012/o-zi-normala-de-luni/ and I do seem to see the wp youtube lyte video (the ever lovely Bangles), so I guess you are (or have been) working on this succesfully?

I wish I did… Just navigate to the main page of the website at indignat.socioblog.ro, then click on the title of the first post excerpt. If you click the “continue” ( […]-> symbol ) link instead of the title of the post, AJAX doesn’t occur (I don’t know how to ajaxify those links manually), you just navigate to the post URL. So, click on the post’s title instead.

For now I’ve only included a call to jQuery.getScript('/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js') in the “reload” section (I’m writing the path out of memory, it’s not necessarily exactly that one).

I see. Can you load lyte.js instead of lyte-min.js and after that explicitely call ly.te()? I’ll have a go at this myself one of the following days if that still does not work.

OK, I’ve been trying, unsuccessfully. I’ve used the uncompressed version. I’ve even tried replacing the jQuery.getScript with a document.write(<script… but that just breaks the website resulting in an empty page (there’s nothing but a head including that script tag when I examine the markup).

I’m only just learning javascript, so I’m probably wrong, but maybe the error “ly is not defined” is caused by jQuery not executing the script in the context of the global object, or because the jQuery.getScript gets called within the so-called reload function defined by the AAPL plugin, while your script doesn’t expect that. Your code is too advanced for me to understand, so I’m not sure of what exactly I am trying to say here, but maybe, for example, you define things that should belong to the global object and they turn out not to.

If you access my website again, remember that auto-minifying of JavaScript is only disabled for logged-in users, so just post a “test” comment on any post during that browsing session (you will asked to log in with a third-party account like facebook/yahoo through a third-party service).

This is what my “reload code” AAPL settings section looks like:

jQuery.getScript('/wp-content/plugins/wp-youtube-lyte/lyte/lyte.js');
ly.te();

And here is where you can see examples of reload codes (javascript) other people used to fix the functionality of some other plugins/widgets using javascript:
https://software.resplace.net/WordPress/AjaxPageLoader.php

Can you remove the getscript and call to ly.te() in your AAPL config? The error causes AAPL not to load the page, so I can’t debug.

Regarding the problem itself: calling ly.te() right after issuing the getScript cannot work, as getScript is executed asynchronously. So the first thing to try would be to call ly.te() in the callback-function of getScript (i.e. on succeful load of the javascript-file).

On the good side, at least now the page contents load and are layout correctly.

This is the new code executed by AAPL_reload_code(), conforming to the jQuery documentation:

var onSuccess = function( script, scriptStatus, jqXHR){
  console.log('AAPL lyte loaded data: ' + script);
  console.log('AAPL lyte jqXHR status: ' + jqXHR.status);
  console.log('AAPL lyte getScript status: ' + scriptStatus);
  ly.te();
};
var onFailure = function(jqXHR, settings, exception){
  console.log('AAPL lyte getScript exception: ' + exception);
};
jQuery.getScript('/wp-content/plugins/wp-youtube-lyte/lyte/lyte.js').done(onSuccess).fail(onFailure);

On the bad side, youtube lyte still doesn’t show up, BUT… thanks to the console.log in the onFailure callback set with fail() above, we can now see a more insightful exception (I’m guessing, during execution of the lyte script that jQuery has loaded asynchronously):
ReferenceError: bU is not defined

EDIT: Setting the onSuccess callback as the getScript’s second parameter’s value instead of using done() results in the same exception.

Remember to empty the browser’s cache before debugging (the next time you can spare the time), so that you get the new reload_code.js, otherwise you may see the same thing as before. Also, I’m completely disabling auto-minifying until you get back to me.

Have a nice day!

Great info, the onSuccess-callback actually solves most of the problem. The full solution builds on this:

var onSuccess = function( script, scriptStatus, jqXHR){
  ly.te();
};

window.bU='https://futtta.be/wordpress/wp-content/plugins/wp-youtube-lyte/lyte/';

style = document.createElement('style');
style.type = 'text/css';
rules = document.createTextNode('.lyte img {border:0px !important;padding:0px;spacing:0px;margin:0px;display:inline;background-color:transparent;max-width:100%} .lL {margin:5px ;} .lP {background-color:#fff;margin:5px ;} .pL {cursor:pointer;text-align:center;overflow:hidden;position:relative;margin:0px !important;} .tC {left:0;top:0;position:absolute;width:100%;background-color:rgba(0,0,0,0.6);} .tT {padding:5px 10px;font-size:16px;color:#ffffff;font-family:sans-serif;text-align:left;} .ctrl {position:absolute;left:0px;bottom:0px;}');
if(style.styleSheet) { style.styleSheet.cssText = rules.nodeValue;} else {style.appendChild(rules);}
document.getElementsByTagName('head')[0].appendChild(style);

jQuery.getScript('/wordpress/wp-content/plugins/wp-youtube-lyte/lyte/lyte.js').done(onSuccess);

What this does (and what is normally done in the footer of a page that contains a LYTE video);

• set bU (path where images & stuff can be found)
• set style for the video
• include lyte.js (or lyte-min.js, if you want)
• call ly.te()

Hope this solves your problem (it does work on my test-blog this way).

I imagined I would feel relieved, but I didn’t imagine I would feel so happy and satisfied. I haven’t felt so good in a while! ;)) I’ve invested a lot of time into making this website work (AAPL of course needed work to be made compatible and even work at all in my case), so it feels very rewarding to see it isn’t for nothing.

The solution is working. Now I can worry about more pleasant stuff like customizing the theme and replacing overly complex widgets with simpler PHP coding and other optimizations. I can’t pay you money, but I can at least translate the admin panel interface of Youtube Lyte to Romanian (if the plugin supports it), or whatever you think I can do to pay you back.

I’m going to post the fix to the public AAPL reload codes (for people to use) if you don’t. I feel like the fail callback should be kept (it will catch and log eventual errors caused by changes in the script of future versions of Youtube Lyte), just for safety.

I’m so glad the site is coming together ??

Glad it works!

I don’t accept money, but I thrive on praise, good ratings and ‘works’-votes for my plugin ??

(I do have a Romanian translation, weird it doesn’t show up on your admin-page)

I think I’ve already voted it ?? but I’ll vote it works with the latest WordPress as well.

It’s not weird that the Romanian translation doesn’t show up – I have a plugin which makes my admin panel display in English and the visitor pages strings in Romanian.

Next I’ll have to make some other widgets compatible with AAPL, like the facebook like button, but that should hopefully be easier now.

Yes, your plugin is great and deserves more recognition indeed, even if it does a simple job apparently. I only use the greatest and most useful plugins! When I’m done customizing the website, I’ll have a dedicated page where I’ll list every component I’m using and the free hosting.

What about AAPL guys?? Dont forget me :p

Anyway I have tried to pick out the successful reload code from this post but I’m a little confused.

Could you please post your reload code so I can share it with the community.

P.S. AAPL does not need work – unfortunately this is the nature of AJAX, if content in the page changes then bindings are lost and need to be re-called, this is the reason for the reload code function. All we can do is collect reload solutions and make them available for everyone to use.

BTW futtta – thank you for helping this guy reach his solution. You have helped your own plugin and AAPL – and I’m grateful.

I’m using a onFailure callback to log eventual errors, which is optional, but useful because Youtube-Lyte will be updated and may trigger exceptions which otherwise wouldn’t be caught by the javascript debugger (because of jQuery which is responsible for asynchronously downloading and then executing/interpreting the script).

Also, in the final line I’m using a root-relative path to specify the path of the Youtube-Lyte script, which works in my case, because my wordpress installation’s homepage is accesible at the root of the domain, but other may have to change that – or use a PHP tag (this being a .php file) to get the home/base URL. The same applies to the tenth line (I noticed he used a full URL there, so it again needs the wordpress location).

I haven’t made other changes to Futta’s code and it works for me (it also logged the exceptions when it was the case and so I was able to identify the issue and he could come up with this “reload code”).

**************************************************************
//AAPL reload code for WP YouTube Lyte
var onFailure = function(jqXHR, settings, exception){
  console.log('AdvancedAjaxPageLoader youtube-lyte reload_code exception: ' + exception);
};

var onSuccess = function( script, status, jqXHR){ ly.te();};

window.bU='https://indignat.socioblog.ro/wp-content/plugins/wp-youtube-lyte/lyte/';

style = document.createElement('style');
style.type = 'text/css';
rules = document.createTextNode('.lyte img {border:0px !important;padding:0px;spacing:0px;margin:0px;display:inline;background-color:transparent;max-width:100%} .lL {margin:5px ;} .lP {background-color:#fff;margin:5px ;} .pL {cursor:pointer;text-align:center;overflow:hidden;position:relative;margin:0px !important;} .tC {left:0;top:0;position:absolute;width:100%;background-color:rgba(0,0,0,0.6);} .tT {padding:5px 10px;font-size:16px;color:#ffffff;font-family:sans-serif;text-align:left;} .ctrl {position:absolute;left:0px;bottom:0px;}');
if(style.styleSheet) { style.styleSheet.cssText = rules.nodeValue;} else {style.appendChild(rules);}
document.getElementsByTagName('head')[0].appendChild(style);

jQuery.getScript('/wp-content/plugins/wp-youtube-lyte/lyte/lyte.js').done(onSuccess).fail(onFailure);
**************************************************************

If you’re going to test edit: my website indignat.socioblog.ro – In case you didn’t read the conversation above, you can trigger AJAX loading only by clicking on the TITLES of the post excerpts/summaries of my website’s homepage/archives. The “more” links don’t use AJAX/AAPL, if you click those links at the end of the post excerpts, it will just take you to the new page with the full post contents, reloading the entire website / HTML document. I mentioned this on another post and you said you didn’t understand what I was trying to say, so please continue the conversation there when you have an answer (to why the “more” links don’t use AAPL like the title links do). In case I’m not very clear, on most websites these links just say something like “continue” or “…”, while in my case the symbol is “[…]->” (at least in the case of most of the posts).