How to add JS in After Header?

Product Support

AI-generated summary

Adding JavaScript to After Header in Discourse

DragonByte is trying to add a JavaScript code to the “After Header” section in their theme component. However, the code only works when added to the “Head” or “Body” sections.

keegan explained that, according to the Discourse developers guide, script tags can only be added to three sections: </head>, Header, or </body>. Adding scripts to other sections, including “After Header”, will not work.

keegan also suggested that DragonByte try wrapping their script in an api.onPageChange function to make it work. However, DragonByte eventually found a solution in a separate Discourse thread, which can be found here.

1

Hello!

I want add script to “After Header” in my theme component, but this is not work.

code:

<button type="button" class="btn btn-outline btn-small" id="Send">Send</button>

<script>
var btn = document.querySelector('#Send');

btn.addEventListener('click', function(e) {
  e.preventDefault();
  
  this.disabled = true;
  
  setTimeout(function(){ btn.disabled=false; }, 10000);
});
</script>

Code work in other block (Head, Body), but I need add this in After Header.

Please help, how I can do it?

2

Maybe add the script in the header and the button in the after header.

3

I try add button to after header and code with script add to header, I view button but script not work.

It’s work only if I add all code (button + sctipr) in head_tag, in other section not work, I need add this in after_header :frowning:

4

This is simply not possible. Note, the developers guide mentions you have only three options for script tags to fire:

Is there a particular reason you need the code in the after_header? There may be other approaches you can take to achieve what you need.

When you tried separating the script in the head and the button in the after_header, are you sure the script is not firing at all, or is it that you are unable to select the button? It may be due to the way the Ember runloop is.

Perhaps you can try wrapping your script in an

<script type="text/discourse-plugin" version="0.8" >
api.onPageChange(() => {
   var btn = document.querySelector('#Send');

   btn.addEventListener('click', function(e) {
     e.preventDefault();
  
    this.disabled = true;
  
     setTimeout(function(){ btn.disabled=false; }, 10000);
   });

});
</script>
5

I found solution in this: Add custom content that only appears on your homepage

Thanks :slight_smile: