Works with Async JavaScript, Otherwise Fails

Resolved CK MacLeod
(@ck-macleod)

8 years, 4 months ago
The plugin was working well for months. At some point, I added the Async JavaScript (AJS) plugin, and, in order to keep things working, I had to exclude vidbg.min.js. Some time later, probably around the time of WP upgrade to 4.9, I noticed that if I deactivated AJS, the bg video wouldn’t load. Since I want to use AJS, I didn’t really mind, although I don’t like being locked into having it.

Since I now have a staging site and am able to experiment more freely with the function, I have been investigating the cause of the above. When I view page source, the only apparent difference in the script files is the addition of the “async” element to scripts not excluded from AJS. The order is the same, and the inline js precedes the footer scripts, among which videobg is the last.

The JS Console, however, shows the following error when AJS is not being used:
```
Uncaught TypeError: $(...).vidbg is not a function
    at HTMLDocument.<anonymous> ((index):2466)
    at i (VM803 jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (VM803 jquery.js?ver=1.12.4:2)
    at Function.ready (VM803 jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (VM803 jquery.js?ver=1.12.4:2)
```
As noted, this is not a major problem right now, since I’m mostly content with AJS. Still, I’d feel more secure about this if I understood why this is happening and could avoid the dependency, in case I need to remove AJS in the future.

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author pushlabs
(@pushlabs)

8 years, 4 months ago

Hi CK MacLeod,

Thanks for using Video Background! Sorry for the late reply.

The error Uncaught TypeError: $(...).vidbg is not a function is a result of calling the init of vidbg i.e. from the metabox, shortcode without the vidbg.min.js script present.

The console means “An instance of Video Background was called, but I don’t know what Video Background is!” due to the script not being there.

However, I took a look at your website and this error is no longer present. Have you resolved this issue?

Additionally, I really like the site! Great design 🙂

Blake

Thread Starter CK MacLeod
(@ck-macleod)

8 years, 4 months ago

Thanks for your kind words, Blake. It has been a collaborative effort, designing that site, though all of the coding and backend stuff has by now fallen to me – which brings me back to your excellent plugin and these mysterious errors.

The issue hasn’t been resolved except in this sense: For some reason, when I have the Async JavaScript activated, but vidbg.min.js excluded, everything works fine. However, as soon as I disable the plugin, I get the error and vidbg fails, even though it appears to be loaded when I look at page source, and in the same order, too.

Thread Starter CK MacLeod
(@ck-macleod)

8 years, 4 months ago

Ah, well, the time has come when it’s more than a curiosity. Async JavaScript screws up my some other scripts I need to run, so I may need to disable it altogether. Or maybe I need to examine what it does more closely. (Even the developer of AJS seems unsure why “defer” breaks some scripts, “async” breaks others.)

This points to a painstaking process of disabling functions and plugins, and possibly testing different scripts or subscripts in a complicated installation.

With AJS on, I have both jquery and vidbg set to be excluded from the plugin. Whether it’s on or off, both scripts appear in the same places – head and footer respectively – but it works ONLY WHEN ASYNC JAVASCRIPT is activated and working. Otherwise, I get the error noted above.

In other words, you can treat this without reference to ASJ: Why isn’t vidbg functioning, at my site. If you’re willing to and interested in troubleshooting this problem, I can temporarily turn off the login-required staging feature or even give you an admin login for the staging site – just say when!
Thread Starter CK MacLeod
(@ck-macleod)

8 years, 4 months ago
Urgency for me of the matter has been reduced again. I can now get all scripts to function on the site – but only with Async JS enabled, but scripts excluded from it. In other words, just to remain clear, videobg works on this site (avoids the type error) only with AJS enabled, but with videobg itself excluded from AJS.

Weird but working so far.
- This reply was modified 8 years, 4 months ago by CK MacLeod.
Plugin Author pushlabs
(@pushlabs)

8 years, 4 months ago

Hi CK MacLeod,

I’m glad you got it working again.

I’ve ran test and determined Video Background works correctly on the most current version of WordPress.

As a result, this must be some kind of a plugin/theme conflict you are experiencing. I would suggest disabling one after another to try and determine what is setting this off.

Blake
Thread Starter CK MacLeod
(@ck-macleod)

8 years, 3 months ago
Well, it’s not a plugin conflict, unless (unlikely) there’s some conflict with Advanced Custom Fields, since I’ve tried it with all plugins turned off except for Vidbg and ACF (the site is heavily dependent on ACF).

So, that leaves a a theme conflict and I’m guessing that means some script used by the theme that somehow disables vidbg unless deferred by Async JS. I’d hoped you might have some idea about a workaround, maybe based on bad prior experience, not to mention your familiarity with your own work, but I guess there’s no real alternative to addressing theme scripts when I find the time.

I’ll let you know if I turn up anything that might be useful for you and other users. Thanks!
- This reply was modified 8 years, 3 months ago by CK MacLeod.
- This reply was modified 8 years, 3 months ago by CK MacLeod.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Works with Async JavaScript, Otherwise Fails’ is closed to new replies.