2

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 ?

10
  • Welcome to JSE, Devika. Please take our tour while you wait for support. Are you able to show us the rendered source code that is generated (by editing your question)? We might need to see all of the rendered JQuery scripting that the page contains.
    – mickmackusa
    May 7 at 4:59
  • 1
    As an aside, might a css solution also work (perhaps in a less verbose fashion)? css-tricks.com/almanac/selectors/a/after-and-before
    – mickmackusa
    May 7 at 5:38
  • I see in your similar question on stack overflow that you try to use this short script in a custom plugin and I am also not sure that your plugin itself works, so if you need more help regarding that just extend your question with some added info/code regarding that plugin code and we can give you more help on that too here. So even if the code in my answer correct and works, your plugin still can have some issues and you will not see the correct result.
    – Zollie
    May 7 at 9:22
  • As you updated your question we should see wether your plugin works or not. Please check in your “page source” if you see the intended script included in your page <head> or not and get back to me with the answer. How to check your page source in different browsers: neilpatel.com/blog/how-to-read-source-code
    – Zollie
    May 7 at 13:05
  • 1
    Let's see that this page is appropriately resolved by an answer instead of a comment. I see that Zollie's answer has been updated to reflect what has been mentioned in comments. Please either award the green tick to Zollie's answer or post your own new/unique answer and accept that. It is important to the system and researchers that resolved pages have an accepted answer.
    – mickmackusa
    May 7 at 21:19
2

$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.

3
  • @Devika Harshan - I'm sorry, I left out the double quote in the js code, I corrected that...
    – Zollie
    May 7 at 6:25
  • @Devika Harshan - Of course the code would work without the double quote too if the $result variable was a number which I was not sure of, that is why I corrected that...
    – Zollie
    May 7 at 8:20
  • thankyou for the reply sir
    – moonlight
    May 7 at 11:52
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.

1
  • Thankyou sir ,I got it .Like you said I was using the wrong event.
    – moonlight
    May 7 at 15:16

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.