Help with js triggered by “do_shortcode” in php

  • Resolved benspr

    (@benspr)


    5 years ago

    I’ve managed to tune Autoptimize to do just about everything I think I need right now (Pagespeed scores of 95+!), except one pesky thing: I use a charting plugin called M-Chart to create about 150 charts that need to be placed within dozens of pages in my site.

    To do the placement, I use the “do_shortcode” statement in php, and fill in the chart id number from my database. The charting plugin relies on jQuery, but as you maybe can guess, with scripts deferred by Autoptimize, the php code tries to call jQuery before it’s loaded, and I get a “jQuery is not defined” console error at several spots in my page.

    I definitely prefer to have jQuery deferred, because it’s otherwise render-blocking and a pain in the you-know-what. And when I don’t use Autoptimize to defer jQuery, it and a bunch of my other scripts need to be excluded to work properly.

    So my question is: Is there a way to have my cake and eat it to, by triggering the “do_shortcode” statements only after the rest of the js is loaded? The rest of the page(s) in question are populated by database calls through php, so I can’t just rewrite the page templates and put the shortcodes into the normal WP editor.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter benspr

    (@benspr)

    Actually, it appears that even charts that are added using the shortcode in the WordPress editor have suffered the same fate, as does the one here: https://www.solarpowerrocks.com/#mchart

    So what is it about M-Chart calling jQuery right there that I can do to get it to load after the deferred jQuery is called in the footer?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    AO runs after the shortcodes have been done, so that is not something it can act upon. There are 2 things that are causing “jQuery is not defined”;

    1. 2 files (jquery.validate.min.js and additional-methods.min.js) are called from https://cdnjs.cloudflare.com/ and both are jQuery plugins (part of jQuery validate). Maybe ask the m-chart developer if/ how these can be sourced locally instead?
    2. more importantly; m-charts creates an iframe to load the actual chart, e.g. https://www.solarpowerrocks.com/chart/california-cash/embed/?show=chart&width=responsive&share. for this one you could use below code to disable AO on those embeds;

    add_filter('autoptimize_filter_noptimize','mchart_noptimize',10,0);
function mchart_noptimize() {
	if (strpos($_SERVER['REQUEST_URI'],'embed/?show=chart')!==false) {
		return true;
	} else {
		return false;
	}
}

    hope this helps,
    frank

    Thread Starter benspr

    (@benspr)

    Thanks for the advice, Frank. The “Load in iframe” setting of the charts plugin was actually a suggestion from the developer, but because of the way Autoptimize works with Cloudflare, it seems like it didn’t do the trick. Also, loading the charts in iframe broke the Highcharts exporting module I use so people on my site can save the charts as PNGs.

    Unfortunately, with my Autoptimize cache at 100% this morning, I had to make the decision to revert to earlier, more stable settings. The AO settings I had chosen also prevented another plugin, “Calculated Fields Form,” from working, and getting those two parts of my site back into functioning status was more important that trying to find the workaround that would allow me to defer jQuery and keep those plugins working.

    Perhaps in the future I’ll revisit this, if I can get the advice of developers within my company. Thanks again for the advice.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    yeah, deferring jQuery can indeed be a pain :-/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with js triggered by “do_shortcode” in php’ is closed to new replies.