Come aggiungere JS nell'After Header?

Supporto
1

Ciao!

Voglio aggiungere uno script in “After Header” nel mio componente tema, ma non funziona.

codice:

<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>

Il codice funziona in altri blocchi (Head, Body), ma devo aggiungerlo in After Header.

Per favore, aiutami, come posso fare?

2

Forse aggiungi lo script nell’intestazione e il pulsante dopo l’intestazione.

3

Ho provato ad aggiungere un pulsante a after header e il codice con lo script a header, vedo il pulsante ma lo script non funziona.

Funziona solo se aggiungo tutto il codice (pulsante + script) in head_tag, in altre sezioni non funziona, ho bisogno di aggiungerlo in after_header :frowning:

4

Semplicemente non è possibile. Nota, la guida per gli sviluppatori menziona che hai solo tre opzioni per l’esecuzione dei tag script:

C’è un motivo particolare per cui hai bisogno del codice in after_header? Potrebbero esserci altri approcci che puoi adottare per ottenere ciò di cui hai bisogno.

Quando hai provato a separare lo script nell’header e il pulsante in after_header, sei sicuro che lo script non venga eseguito affatto, o è che non riesci a selezionare il pulsante? Potrebbe essere dovuto al modo in cui funziona l’Ember runloop.

Forse puoi provare a racchiudere il tuo script in un

<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 Mi Piace
5

Ho trovato una soluzione qui: Add custom content that only appears on your homepage

Grazie :slight_smile:

2 Mi Piace