jQuery not defined

  • Resolved jotaf

    (@jotaf)


    4 years, 11 months ago

    Hi Frank!

    First things first… Awesome plugin, cannot get my head around how you manage to provide such great level of functionality & support for free.

    Excuse me if I don’t have all the concepts correctly stablished in my head or say something not very logical, fairly new to the WP optimization world and don’t have much understanding of JS, but doing my best!

    These last days we’ve been trying to raise the pagespeed score for our website with great results using a combination of your Autoptimize and W3TC. Managed to eliminate render blocking CSS & JS (thanks for your guidance on critical css path) and we are almost perfectly happy with how things are at the moment. The only issue we seem to have right now is with Twenty20 image slider plugin, which uses jQuery.

    Initially we had “js/jquery/jquery.js” excluded from autoptimize but this would result in a render blocking message on pagespeed, to get around this we used W3TC minify settings to inject in header using Async.

    This seemed to do the trick, got rid of the pagespeed message but suddenly some of our Twenty20 sliders stopped working. For example on a page we have +20 sliders, only the first 6 would not work. When checking source code I can see some inline JS not being executed for the ones that don’t work.

    Upon checking console I can see:

    "Uncaught ReferenceError: jQuery is not defined at (index):272"

    Also if I check source code, can also see at the very top, after <head> tag the W3TC file that has jquery inside:

    "/wp-content/cache/minify/fedfa.default.include.279063.js"

    But can also see references to jquery inside other file which is right before the </body> tag, I think generated by autoptimize?:

    /wp-content/cache/autoptimize/autoptimize_3a43ccd4f89d4260b5095cb2a398c8e5.php

    Any guidance you could give us on how to make those 6 sliders work? 🙂

    Many, many thanks and hope you have a nice day.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter jotaf

    (@jotaf)

    4 years, 11 months ago

    Sorry!! Forgot to add to my topic:

    I reckon the correct way of going over this issue would be to follow your FAQs and re-add “js/jquery/jquery.js” to the list of exclusions but this creates render blocking.

    Any alternative?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 11 months ago

    afraid there’s no easy solution;
    -> asyncing jQuery will result in it not always being active when needed by the slider
    -> not excluding it will result in it never being active when needed by the slider

    as a workaround you could try the workaround I wrote about in this blogpost, but that might not work.

    the only good solution would be to look for a slider which either waits for jQuery to become available or for a slider which uses “vanilla” JS iso requireing jQuery.

    hope this helps,
    frank

    Thread Starter jotaf

    (@jotaf)

    4 years, 11 months ago

    Amazing, would love to try that workaround and let you know.

    That piece of code on Gist – Will it work just by copying and pasting on functions.php or does it need any modification at all?

    Thanks for your suggestion about another slider that doesn’t use jQuery, will look at that as well

    Thread Starter jotaf

    (@jotaf)

    4 years, 11 months ago

    Just tried the code, added it as a php snippet to all pages using Woody Snippets and our header broke, showing some code 🙁

    Thread Starter jotaf

    (@jotaf)

    4 years, 11 months ago

    Nevermind, completely my fault! Added it as a HTML snippet instead of php.

    Working as a charm now, load time went down from 2 secs to 861 ms.

    Thanks so much for your help and assistance, Frank!!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 11 months ago

    you’re welcome jotaf, feel free to leave a review of the plugin and support here! 🙂

    Thread Starter jotaf

    (@jotaf)

    4 years, 11 months ago

    Hi Frank,

    Sorry to keep pestering you, we’ve realized something quite strange…

    Images don’t seem to load the first time you visit our page, if you refresh, they work fine until next time browser cache is cleared.

    I’ve realized this is showing on Chrome’s error console – Do you think it might be related to our issue with the images?

    Uncaught ReferenceError: Cookies is not defined
    at HTMLDocument.<anonymous> (autoptimize_cf009272c9e3841ff487e8f4410becf1.php:5)
    at i (fedfa.default.include.279063.js:2)
    at Object.add [as done] (fedfa.default.include.279063.js:2)
    at n.fn.init.n.fn.ready (fedfa.default.include.279063.js:2)
    at a.fn.init.n.fn.init (fedfa.default.include.279063.js:2)
    at new a.fn.init (fedfa.default.include.279063.js:4)
    at n (fedfa.default.include.279063.js:2)
    at autoptimize_cf009272c9e3841ff487e8f4410becf1.php:5
    at autoptimize_cf009272c9e3841ff487e8f4410becf1.php:5
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 11 months ago

    Do you think it might be related to our issue with the images?

    well, browsers stop executing a JS-file when errors are encountered in certain cases, so that could certainly be the case here.

    on the other hand; if images only not load the first time, but they load the 2nd time, this could also be due to JS firing late the first time (as it has to be downloaded and/ or because it’s deferred or asynced) but firing sooner the 2nd time because said file is in cache.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘jQuery not defined’ is closed to new replies.