Joomla 4: loading JS at the top Topic is solved

Be informed that this forum is not an official support forum for Joomla! 4.0. Any issues regarding Joomla! 4.0 must be reported at https://issues.joomla.org/.

Joomla 4.0 is still in Beta stage. This forum should be used for sharing information about Joomla! 4.0.

Moderator: ooffick

Forum rules
Post Reply
joepw
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Mar 18, 2011 12:25 pm
Location: Nijmegen, Netherlands

Joomla 4: loading JS at the top

Post by joepw » Sun May 09, 2021 2:50 pm

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

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 27813
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Joomla 4: loading JS at the top

Post by Per Yngve Berg » Sun May 09, 2021 5:37 pm

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

User avatar
ceford
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 202
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Joomla 4: loading JS at the top

Post by ceford » Mon May 10, 2021 10:30 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Mar 18, 2011 12:25 pm
Location: Nijmegen, Netherlands

Re: Joomla 4: loading JS at the top

Post by joepw » Mon May 10, 2021 11:55 am

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

User avatar
ceford
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 202
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Joomla 4: loading JS at the top

Post by ceford » Mon May 10, 2021 1:49 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Mar 18, 2011 12:25 pm
Location: Nijmegen, Netherlands

Re: Joomla 4: loading JS at the top

Post by joepw » Tue May 11, 2021 3:33 pm

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']);


Post Reply

Return to “Joomla! 4 Related”