Comment ajouter du JS après l'en-tête ?

Soutien
1

Bonjour !

Je souhaite ajouter un script à « Après l’en-tête » dans mon composant de thème, mais cela ne fonctionne pas.

Code :

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

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

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

Le code fonctionne dans d’autres blocs (En-tête, Corps), mais je dois l’ajouter dans Après l’en-tête.

Pouvez-vous m’aider, comment puis-je faire ?

2

Peut-être ajouter le script dans l’en-tête et le bouton après l’en-tête.

3

J’essaie d’ajouter un bouton à after header et le code avec le script à header. Je vois le bouton mais le script ne fonctionne pas.

Il ne fonctionne que si j’ajoute tout le code (bouton + script) dans head_tag, dans d’autres sections, il ne fonctionne pas, j’ai besoin de l’ajouter dans after_header :frowning:

4

Ce n’est tout simplement pas possible. Notez que le guide des développeurs mentionne que vous n’avez que trois options pour que les balises de script se déclenchent :

Y a-t-il une raison particulière pour laquelle vous avez besoin du code dans le after_header ? Il existe peut-être d’autres approches que vous pouvez adopter pour obtenir ce que vous voulez.

Lorsque vous avez essayé de séparer le script dans le head et le bouton dans le after_header, êtes-vous sûr que le script ne se déclenche pas du tout, ou est-ce que vous ne parvenez pas à sélectionner le bouton ? Cela peut être dû à la façon dont fonctionne la boucle d’événements Ember.

Peut-être pourriez-vous essayer d’encapsuler votre script dans 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 « J'aime »
5

J’ai trouvé une solution ici : Add custom content that only appears on your homepage

Merci :slight_smile:

2 « J'aime »