Loading JavaScript function onload Event in Joomla

Question

I am trying to be able to load JavaScript function when I load an article inside Joomla. In normal HTML coding that would be in the body using the onload event - there I would be able to load what ever I want including JS functions. i.e.

<body onload="myJSFunction()">

I am using Sorcerer to be able to write down the JS inside Joomla AS IS - But I could NOT be able to load the function when the article loads.

I would be happy to know the right way to load JS functions in Joomla Articles. I have managed to activate the JS using an OnClick event - that means the JS code works inside Joomla.

I would like that the event would be activated on Article load - Is there a way to do that? Is there a PHP code that can assist me with that? I have tried using this code with no luck - When My Article ID is 133. That code should have change the Joomla body to use the onload event when it meets Article ID number 133 - But, It did not work in Joomla at all and I did not get the onload event I wanted.

> <?php if ($_GET['id'] == 133) {
>       $body = '<body onload="MyJSFunction()">';
>       } else {
>              $body = '<body>';
>       } ?>

Please assist me with making this happen. Thanks in Advanced

Matiu Carr · Accepted Answer · 2015-11-29 21:22:53Z

1

If you are able to put javascript into the document, then you could add a line that attaches the function to the onload event using document.body.addEventListener.

Something like

document.body.addEventListener("onload", function(){ MyJSFunction(); });

Your function could live inside the anonymous function itself.

Modifying this after our discussion (and correcting a typo):

<script type="text/javascript">
document.body.addEventListener("onload", function(){
    var firstDivContent = document.getElementById('MyDiv');
    var secondDivContent = document.getElementById('MyDiv2');
    secondDivContent.innerHTML = firstDivContent.innerHTML;
});
</script>

or if there are no other event listeners around, you could try:

<body onload="var firstDivContent = document.getElementById('MyDiv');
    var secondDivContent = document.getElementById('MyDiv2');
    secondDivContent.innerHTML = firstDivContent.innerHTML;">

edited Nov 29, 2015 at 21:22

answered Nov 29, 2015 at 19:42

Matiu Carr

2981 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arye Guetta Over a year ago

Thanks Matiu. I have tried adding your code inside the current Joomla code that I have - like this as well:

<script type="text/javascript">document.body.addEeventListener("onload", function(){ doSomething(); });  </script> <script type="text/javascript">     function doSomething(){ ......     }   </script>

BUT it didn't work - The JSFunction worked just fine using the OnClick event. But I could not make it work onload event. Any idea why? thanks

Matiu Carr Over a year ago

if you put your function inside the addEventListener, then you can be sure it exists when called. Sometimes javascript gets all mixed up about what is present and not when loading, so you might find that you are getting some kind of "no such function" error. The function you call has to exist when the event listener is added to the body.

Arye Guetta Over a year ago

Thanks. I am not quite understand what I need to do? I have switched the places and still only worked on the onClick event and no Onload. and when I did this

<script type="text/javascript">document.body.addEeventListener("onload", function doSomething(){       var firstDivContent = document.getElementById('MyDiv');       var secondDivContent = document.getElementById('MyDiv2');       secondDivContent.innerHTML = firstDivContent.innerHTML;     }; });  </script>

It DID NOT work at all. Please help me understand what I am doing wrong. Thanks

Matiu Carr Over a year ago

I had a typo which you have copied (corrected now), and there was an extra }; in your code. See the new version of my answer -hope it helps.

Arye Guetta Over a year ago

Thanks Not work used

{source}<span style="font-family: courier new, courier, monospace;"><br />&lt;script type="text/javascript"&gt;<br />document.body.addEventListener("onload", function(){<br /><img src="/pets/media/sourcerer/images/tab.png" alt="" />var firstDivContent = document.getElementById('MyDiv');<br /><img src="/pets/media/sourcerer/images/tab.png" alt="" />var secondDivContent = document.getElementById('MyDiv2');<br /><img src="/pets/media/sourcerer/images/tab.png" alt="" />secondDivContent.innerHTML = firstDivContent.innerHTML;<br />});<br />&lt;/script&gt;<br /></span>{/source}

|

Collectives™ on Stack Overflow

Loading JavaScript function onload Event in Joomla

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related