addScriptDeclaration is not working

Question

I am trying to add an inline Javascript in my Joomla 4 plugin using addScriptDeclaration().I edited the code like suggested but the plugin is not working .After enabling it , it is not doing anything .Also I'm confused about the error Uncaught ReferenceError: $ is not defined

 <?php
// no direct access
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Plugin\CMSPlugin;

class PlgSystemhelloworld extends CMSPlugin
{
  
  public function onAfterDispatch()
    {
   $result = "girl";
  $document = JFactory::getDocument();
  $document->addScriptDeclaration(' document.addEventListener("DOMContentLoaded", function()
    {
      alert(hello + "' . $result . '");
      }
   );');
      
     
    
    } 
}
?>

Also, Is there any good tutorials available ?

Answer 1

$document->addScriptDeclaration() method is working, no problem with that.

window.event is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Window/event

instead of that you should use document.addEventListener() or window.addEventListener() on the event of DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

So the working version of your code is about this:

<?php
// no direct access
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Plugin\CMSPlugin;

class PlgSystemappendtext extends CMSPlugin
{
    public function onBeforeCompileHead()
    {
       $result = " girl"; // just for a sample text
       $document = JFactory::getDocument();
       $document->addScriptDeclaration(' window.addEventListener( "DOMContentLoaded", function()
       {
             alert(hello + "' . $result . '"); //or any other js code
       }
       ); ');
     }
}

The Uncaught ReferenceError: $ is not defined is coming from another wrongly applied jQuery script on your page.

And after few question's update and clearing just to complete this for future readers, as @Sharky correctly pointed to the appropriate plugin events, the plugin should use public function onBeforeCompileHead() function and everything will work fine.

Answer 2

You are using onAfterRender event which is not suitable for modifying the document object because this event is triggered after the page has already been rendered. Use onAfterDispatch, onBeforeRender or onBeforeCompileHead instead.