3

I want to add the alias to the body. I don't want to edit my template in case of template updates. So I'm going to create a plugin to overcome this issue.

So my query is... can I do this in PHP or should I just use jQuery. I know I need PHP to get the alias, and using jQuery is fine to add the class.

I'm just wondering which is the best way or if there is any downside.

So far I've come up with this but for some reason it is not working. The PHP part works but not the JavaScript

<?php

    $app       = JFactory::getApplication();
    $menu      = $app->getMenu();
    $active    = $menu->getActive();
    $alias     = $active->alias;


    $javascript='

    document.body.classList.add("' . $alias  . '");
    ';


    $document=JFactory::getDocument();
    $document->addScriptDeclaration($javascript);
?>
Improve this question
4
  • 1
    So you've checked the source code and it shows the rendered alias value and line of js code, but it is not applying the new class value to the body tag? What is an example $alias value?
    – mickmackusa
    Commented Jan 3, 2019 at 2:29
  • Sorry, the code above is wrong. This code didn't work because it was added in the head before the body existed. I'll update it when I'm not on my phone. I was reading your other answer to try and find a new solution. Which I was trying by replacing </body> using JS. But so far that hasn't worked either. Then I can add the script in a normal <script> tag
    – Eoin
    Commented Jan 3, 2019 at 2:32
  • 1
    I'll stay tuned for updates.
    – mickmackusa
    Commented Jan 3, 2019 at 2:32
  • Glad to hear it, you post some great answers.
    – Eoin
    Commented Jan 3, 2019 at 2:34

2 Answers 2

Reset to default
4

Remember that if you want to use vanilla JS, you need to use the equivalent of jQuery's document.ready() method.

So you want to use document.addEventListener('DOMContentLoaded'), like so:

<?php

    $app    = JFactory::getApplication();
    $menu   = $app->getMenu();
    $active = $menu->getActive();
    $alias  = $active->alias;

    JFactory::getDocument()->addScriptDeclaration('
        document.addEventListener("DOMContentLoaded", function() {
            document.body.classList.add("' . $alias  . '");
        });
    ');

?>

Because Joomla loads all Javascript in the <head>, without using an event listener, it will attempt to add the class to the <body> even though the page hasn't got as far as rendering the HTML yet, therefore it won't work.

Improve this answer
7
  • Ah ha, you can't just move it down the page. I will still have to learn how to add things before </body> because that's good practice.
    – Eoin
    Commented Jan 3, 2019 at 12:22
  • Glad it worked and hats off for joining "Team Vanilla" :)
    – Lodder
    Commented Jan 3, 2019 at 12:44
  • Slowly slowly catchy monkey. But here's not enough difference to require jQiery any more.
    – Eoin
    Commented Jan 3, 2019 at 12:49
  • Ok @lodder I've updated my question. I'm trying to make this a plugin. Your code works. But my plugin does not work
    – Eoin
    Commented Jan 3, 2019 at 14:38
  • 1
    Please create a new question as the initial topic has been solved.
    – Lodder
    Commented Jan 3, 2019 at 14:49
3

The jQuery part must be called in the document.ready() event.

Try this:

$javascript='
    jQuery(document).ready(function(){
         jQuery("body").addClass("' . $alias  . '");
    });        
    ';
Improve this answer
6
  • It's not jQuery. It's vanilla JS
    – Eoin
    Commented Jan 2, 2019 at 23:54
  • Depsite not needing jquery, this should delay the execution as required.
    – mickmackusa
    Commented Jan 3, 2019 at 4:22
  • @Eoin Did you try my answer? What is the result if you tried it?
    – Mohamed Abdelaziz
    Commented Jan 3, 2019 at 7:43
  • Mohamed I didn't try it as I don't want to use jQuery. I believe it would.work though, the code looks good.
    – Eoin
    Commented Jan 3, 2019 at 12:20
  • @Eoin That's fine, although I see that you said in your question: I know I need PHP to get the alias, and using jQuery is fine to add the class
    – Mohamed Abdelaziz
    Commented Jan 3, 2019 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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