ACF google map field fails with sage9

shoetten · June 22, 2017, 1:19pm

I’m trying to add the Google Map field to a custom post type with advanced custom fields v4.4.11.

Unfortunately, when editing the field in the backend, the area where the map should be is blank and it prints the following error to the console

Uncaught TypeError: Cannot read property 'jquery' of null
    at Function.n.param (jquery.js?ver=1.12.4:4)
    at Object.success (input.js?ver=4.4.11:2330)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at y (jquery.js?ver=1.12.4:4)
    at HTMLScriptElement.b.onload.b.onreadystatechange (jquery.js?ver=1.12.4:4)

It works, when i switch to another theme.

I’m using sage 9.0.0-beta.3 from composer.

Anybody experienced a similar issue and / or can point me to a solution?

Thanks!

ben · June 22, 2017, 4:26pm

Is jQuery in the footer while ACF is trying to use it in the page before it’s loaded? If so, you can see if moving jQuery to the header by changing true to false on this line fixes your problem:

github.com

roots/sage/blob/f5a31c3feb7ce9e36ea7744fef3f6ffc5d411ae8/app/setup.php#L16


use Roots\Sage\Assets\JsonManifest;
use Roots\Sage\Config;
use Roots\Sage\Template\Blade;
use Roots\Sage\Template\BladeProvider;


/**
* Theme assets
*/
add_action('wp_enqueue_scripts', function () {
   wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
   wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
}, 100);


/**
* Theme setup
*/
add_action('after_setup_theme', function () {
   /**
    * Enable features from Soil when plugin is activated
    * @link https://roots.io/plugins/soil/
    */

shoetten · June 22, 2017, 5:12pm

Thanks for your answer.

No, this does not help. The loading order is the same, either way. The ACF script loads after jQuery, like it should.
Sorry, i should have made it clear, that the error is happening when trying to edit the custom field in the backend.

shoetten · June 22, 2017, 5:28pm

Aahhh, i found the error. Sorry for taking your time.
I simply forgot about namespacing, when adding the google api key and got mislead by the js error, thinking the problem lay there.

Thanks again.

christoph · April 10, 2018, 2:46pm

Hey shoetten, can you tell my how you fixed it? I also got to the point that it has to do with the namespacing but I am unexperienced and I don’t know how to fix it.
Thanks in advance!

ben · April 10, 2018, 5:46pm

Please post your code.

Also, https://roots.io/upping-php-requirements-in-your-wordpress-themes-and-plugins/

shoetten · April 10, 2018, 6:11pm

Hey, if it’s the same issue with the Google API key, you can add this to your setup.php

// Google maps api key for ACF
function acf_google_map_api($api) {
    $api['key'] = 'YOUR_API_KEY';
    return $api;
}
add_filter('acf/fields/google_map/api', __NAMESPACE__ . '\\acf_google_map_api');

or use a closure

// Google maps api key for ACF
add_filter('acf/fields/google_map/api', function ($api) {
    $api['key'] = 'YOUR_API_KEY';
    return $api;
});

Hope that helps…

christoph · April 10, 2018, 10:16pm

Thanks a lot! Works perfectly!