2

I am writing some custom javascript in Joomla 4 Beta 6 to control various aspects of my custom front-end template's menus. It needs to load after the page has been rendered, so I want to add it at the bottom of the template's index.php file.

If I add the script in full it works fine. If I add the code to /js/user.js and then add the full URL link to the file - as if it was an external file - in the bottom of the index.php file, it also works, fine, e.g:

<script src="https://my.website.com/templates/my_template/js/user.js"></script>

However, I'd rather not have the full link visible, but if I try to add it via a local reference (using both double and single quotes), it doesn't work, e.g.:

<script src="/js/user.js"></script>

I have also tried adding a php instruction like this:

<?php $doc = JFactory::getDocument(); $doc->addScript('templates/'. $this->template . '/js/user.js'); ?>

Which works for the template.js at the top of the file, but it doesn't work in this position at the bottom, either.

What am I doing wrong? Thanks.

4

Unfortunately Casseopeia (default Joomla 4 frontend template) uses the following:

<jdoc:include type="scripts" />

inside the <head> tags at the top of the DOM, so any script added via $doc->addScript(), HTMLHelper::script() or WebAssetManager will be added up there.

That said, loading the file at the top doesn't really matter. You can simply defer the load and use the correct event listener, like so:

use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::_('script', 'user.js', ['version' => 'auto', 'relative' => true], ['type' => 'module']);

Note the 'type' => 'module'. This does NOT mean a Joomla module. It means a Javascript module which is deferred automatically.

Inside your user.js, you can then execute your code once the DOM has loaded:

document.addEventListener('DOMContentLoaded', () => {
  // Your code here
})

or once the entire page has loaded

window.addEventListener('load', () => {
  // Your code here
})
6
  • Thank you. I can't seem to get it to work. I added the code to the user.js file and then copied and pasted the line you provided, i.e. "HTMLHelper::...etc" inside the head tags before <jdoc:include type="metas" />. Was that the right place? Is there anything else I need to add into the index.php? Thanks. – Gillian Oct 30 '20 at 17:27
  • That line is PHP, so you need to wrap it inside <?php ... ?> tags. You can add it near the top of the index.php – Lodder Oct 30 '20 at 21:51
  • I have added exactly this: <?php HTMLHelper::_('script', 'user.js', ['version' => 'auto', 'relative' => true], ['type' => 'module']); ?> - and no other new code - just above the <!DOCTYPE html> declaration, another attempt just below it but above the <head> tag, a third under the <head> tag and finally in the <body>. In all cases it just returns the J4 error message "Oops! An Error Occurred. The server returned a "500 Whoops, looks like something went wrong.". – Gillian Oct 31 '20 at 9:12
  • Ahh, sorry, make sure you have use Joomla\CMS\HTML\HTMLHelper; at the top of the file before adding that bit of code. – Lodder Oct 31 '20 at 10:21
  • Great! It works perfectly, now. Many thanks :-) – Gillian Oct 31 '20 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.