I'm writing a plugin to support Google Graphs. It's working fine on the public side, but is intermittently rendering weirdly on the admin side, and also intermittently throwing errors that make me think the JS is running too soon. (for example, TypeError: null is not an object (evaluating 'document.getElementById(colControlId).appendChild')
, but when I go inspect the page, that element is absolutely there.
The function that drives everything is registered to the Google library as a callback:
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(initializeData);
// Query a CSV for the data
function initializeData() {
let graphs = document.getElementsByClassName("cwraggbp_chart");
The Google docs say, "When the packages [loaded above by google.charts.load
] have finished loading, this callback function will be called with no arguments. The loader will also wait for the document to finish loading before calling the callback."
But, I can't see how I can be getting this error intermittently if the DOM is fully loaded, and I don't know what "document loaded" means. So, since this works flawlessly on the public side, but not in admin, I'm wondering if ... something is different.
I'm loading the scripts thusly:
public function enqueue_scripts() {
wp_enqueue_script( $this->plugin_name . '-public',
plugin_dir_url( __FILE__ )
. 'js/cwra-google-graph-block-public.js', // this is where the JS above is
array( $this->plugin_name . 'googlecharts', 'jquery' ),
$this->date_version(
'js/cwra-google-graph-block-public.js'), false );
wp_localize_script( $this->plugin_name . '-public',
'cwraggbp',
array(
'contentdir' => wp_upload_dir()['baseurl']
. '/cwraggb'
));
wp_enqueue_script( $this->plugin_name . 'googlecharts',
'https://www.gstatic.com/charts/loader.js',
array(), $this->version, false );
}