wp_enqueue_script in_footer ignored / Broken Menu button Jetpack Mobile Theme

This is not really a bug, because the goal of WP Minify Fix is to put all javascript files into a single file.

If not all scripts should be placed in the footer (as you can about the settings), so there must be at least two different JavaScript files (one for the footer, and one for the header).

But I think it would be ideal if there was only a single JavaScript file, because that is the goal of the plugin.

IMHO should jetpack as suggested by you pack a document.ready wrapper around their script. Another possibility would be that WP Minify Fix wraps a document.ready to all scripts that are placed in the footer, which would be expensive to implement.

Or it would just be two JavaScript files. But I think that’s suboptimal.

I was afraid you were going to say something like this ??

I don’t want to put everything in the footer, because I read that might cause problems when things are depending on scripts loaded at the top of the page.

By the way, Jetpack’s Gravatar Hovercards also doesn’t work with WP Minify Fix for the same reason: gravatar-hovercards.php uses wp_localize_script() to place a piece of javascript on the page that sets a variable WPGroHo. That piece of script is placed in the footer. Normally, it would be followed by the loading of wpgroho.js, which is enqueued with $in_footer=true and needs WPGroHo. When using WP Minify Fix, wpgroho.js is minified at the top, but wp_localize_script() still puts the script setting the variable WPGroHo at the bottom. Result: wpgroho.js runs before WPGroHo is set, gives an error (ReferenceError: WPGroHo is not defined) and all the following scripts that it was combined and minified with are also not executed anymore. In this case, I solved it by excluding wp-content/plugins/jetpack/modules/wpgroho.js from minify.

A similar problem seems to be going on with Jetpack’s Sharing module. It uses wp_localize_script() to set a variable named sharing_js_options. This variable is needed by the script sharing.js. Although I don’t see it enqueued with $in_footer=true, the setting of the variable and the script are normally placed in the footer. With WP Minify Fix active, sharing.js is moved to the head, while the setting of sharing_js_options stays in the footer, again resulting in an error. I solved this as well by excluding wp-content/plugins/jetpack/modules/sharedaddy/sharing.js from minify.

I can imagine that in certain scenario’s WP Minify Fix’s current behavior is a feature, not a bug, but for me it is giving me a lot of trouble right now.

Thanks anyway for an otherwise great plugin,
Peter

I’ll probably add an option in the next version, so a separate compressed javascript file is created for the footer. This is definitely better than exclude many scripts and load them all separately.

That would be nice. Thanks!

Version 1.4.0 is out now. Does it work for you?

Wow, great, that sure looks like a big step in the right direction. Doesn’t completely work for me yet, though. Here are my test results:

• For wpgroho.js (Jetpack’s Gravatar Hovercards module) and sharing.js (Jetpack’s Sharing module), their variables (WPGroHo and sharing_js_options) are normally set just before loading the javascript file:

  Without minification:

  </footer>
  ...
  <script type='text/javascript'>/*  */
  var WPGroHo = {"my_hash":""};
  /*  */</script> <script type='text/javascript' src='https://localhost/example/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.1'></script>
  ...
  <script type='text/javascript'>/*  */
  var sharing_js_options = {"lang":"en","counts":"1"};
  /*  */</script> <script type='text/javascript' src='https://localhost/example/wp-content/plugins/jetpack/modules/sharedaddy/sharing.js?ver=20140920'></script>
  ...
  </body>

  With minification, the minified script files are loaded after the </footer>-tag, but still before the variables are set:

  </footer><script type="text/javascript" src="https://localhost/example/wp-content/plugins/wp-minify-fix/min/?f=wp-includes/js/jquery/jquery.js,wp-includes/js/jquery/jquery-migrate.min.js&b=example&m=1000000000"></script><script type='text/javascript' src='https://localhost/example/wp-content/plugins/wp-minify-fix/min/?f=wp-content/plugins/akismet/_inc/form.js,wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js,wp-content/plugins/contact-form-7/includes/js/scripts.js,wp-content/plugins/jetpack/modules/wpgroho.js,wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/js/small-menu.js,wp-includes/js/comment-reply.min.js,wp-content/plugins/jetpack/modules/sharedaddy/sharing.js&b=example&m=1234567890'></script>
  ...
  <script type='text/javascript'>/*  */
  var WPGroHo = {"my_hash":""};
  /*  */</script>
  ...
  <script type='text/javascript'>/*  */
  var sharing_js_options = {"lang":"en","counts":"1"};
  /*  */</script>
  </body>

  This results in the same script errors as before:
  ReferenceError: WPGroHo is not defined
  If wpgroho.js is excluded:
  ReferenceError: sharing_js_options is not defined

• small-menu.js (Jetpack’s Mobile Theme, containing code for the menu button for Twenty Eleven) now works, provided it is not minified together with wpgroho.js, which normally precedes small-menu.js. Because of the error wpgroho.js throws (see above), the code from small-menu.js does not get executed, resulting in a non-responsive menu button after all.

Perhaps load the minified scripts even further down the page, not just below </footer>, but all the way down, just above </body>?

Just let me know if you need more information.

Just to confirm, the problems with wpgroho.js (Jetpack’s Gravatar Hovercards module) and sharing.js (Jetpack’s Sharing module) still exist with the latest development master from GitHub (commit cc624b5387).

Only the script error for Jetpack Sharing has changed, but that is probably due to changes in that plugin:
TypeError: WPCOMSharing is undefined

I will continue excluding these two files from minification.