How to add JS in After Header?

Support
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>
3 Likes
5

I found solution in this: How to add custom content that only appears on your homepage

Thanks :slight_smile:

2 Likes