Joomla 4: loading JS at the top Topic is solved

[joepw]

A question concerning Joomla 4, a forum category for Joomla 4 already exists ?

googlecharts.js must be included at the top of the page.

can this be done via the asset manager ?
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();

or via the HTMLhelper

HTMLHelper::_('script','com_wwebsurveys/js/googlecharts.js', ['version' => 'auto', 'relative' => false ]);


regards, Joep

[Per Yngve Berg]

Mod. Note: Relocated the topic from Joomla 3.x to the Joomla 4 forum.

[ceford]

Use the web asset manager. Here an example from using geocode:

Code: Select all

$config = ComponentHelper::getParams('com_thingy');
$key = $config->get('apikey');

$uri = JURI::getInstance();
$scheme = $uri->getScheme();

$wa->registerAndUseScript('gmap', $scheme  .  '://maps.googleapis.com/maps/api/js?key=' . $key . '&sensor=false', [], ['defer' => true]);

$wa->addInlineScript("
	var mapapikey = '{$key}';
");

Also your reference to googlecharts.js is not consistent with the spec which says to use this:

Code: Select all

<script src="https://www.gstatic.com/charts/loader.js"></script>

[joepw]

thanks for the reply ceford.

I downloaded googlecharts.js somewhere and put it on the webserver.

With this code the JS-file is correct loaded at the bottom of the file

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('googlecharts','com_wwebsurveys/googlecharts.js', [], ['defer' => true]);

But, no pie-chart is displayed and this JS-error occurs: Uncaught ReferenceError: google is not defined

The JS-chartcode wants googlecharts.js loaded at the top of the page.

putting these lines at the top of the php-file the pie-chart is displayed:

?>
<script src="/develop4/media/com_wwebsurveys/js/googlecharts.js"></script>
<?php


regards, Joep

[ceford]

It is probably to do with order. Look at the web assets tutorial:

https://docs.joomla.org/J4.x:Web_Assets

especially the parts that mention before/after. And you may need to put your chart script inside a DOMContentLoaded event:

Code: Select all

document.addEventListener('DOMContentLoaded', (event) => {
...
});

[joepw]

ok, things succeeded, thank you

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('googlecharts','com_wwebsurveys/googlecharts.js');

// build php-string with JS-code for displaying a pie-chart
$js;

$wa->addInlineScript($js, ['position' => 'after'], [], ['googlecharts']);