Users are experiencing issues inserting JavaScript into the Footer section of their Discourse UI, with no errors or console logs appearing. techAPJ explained that only the Header, </head>, and </body> sections support injecting JavaScript, while the Footer section is only for visual changes.
Sam elaborated that the lifecycle of a single-page application like Discourse is different from a traditional webpage, and hooks in Ember are needed to run code at specific times. Users are advised to use these hooks instead of inserting scripts in the Footer.
Multiple users have reported this issue, including stevenpslade, kourou, and frostydog, who also encountered issues with saving JavaScript in the </body> section.
Continuing the discussion from How do I insert javascript into the footer?:
In Footer of the Discourse UI I am trying to get javascript to run but it does not and there are no errors. It’s as if it just isn’t present.
<script>
console.log("anything");
</script>
This is in Footer, nothing console.logs. It is Enabled, too.
Hmm can we repro this @techapj?
Looking at the code by which footer is inserted, I believe it’s not possible to insert JavaScript via Footer and Top.
The only sections which supports injecting JavaScript are Header, </head> and </body>.
I am not able to repro this, normal content appears fine in Footer. Also here is one of our hosted instance which has custom Footer:
http://forums.mtbakervapor.com/t/welcome-to-mt-baker-vapors-discourse/6
Looks just fine.
How is one to include a JS script that is run after the page has loaded (and keep in mind it can’t be done with a document ready. It needs to be in the footer.
Hello.
Is there any update on this issue?
I am also trying to include javascript code in top/footer but it is not working.
What I want to do, is insert (for example) google adsense or AdTech tags in Top/Footer, but it seems that the script is not executed.
In Header (Customize → CSS/HTML → Header), however, the script is working as expected.
Can you please fix it?
Thanks,
Ilias
Nothing is broken here, have a look at examples of supported ways of adding scripts, for example:
If I add the same script to Header (Admin / Customize / CSS/HTML / Header) and Footer (Admin / Customize / CSS/HTML / Footer), it is working only in Header, that’s what I’m saying.
You can try this out yourself. I just did the test with default Google Adsense tags, but you can test it with any simple script, for example:
<script>
alert("script executed");
</script>
In “Footer” this will not popup the dialog, whereas in “Header” this will work.
Thank you,
Ilias
Footer is not designed to allow for script tags, it is just for visual changes.
The lifecycle of our application is very different to what a traditional webpage is. There are hooks in Ember you need to use if you need code to run
and so on.
The to make XYZ work put the following “snippet” in your HTML footer concept make no sense for a single page application.
Got it, thanks.
I will look for any howto on implementing these hooks. If there is any tutorial about it here in meta, please advise.
This is happening to me today. When I insert a Javascript on the </body> section, I just cannot save.
v1.8.0.beta5 +211