addEventListener non actif après reconstruction d'une page en JS

Salon des Développeurs Aide Programmation
1

Salut,

J’ai besoin d’un coup de main :sweat_smile:

J’essaie de voir comment améliorer ce que j’ai commencé à faire pour la suppression et l’ajout d’une ligne dans un tableau (design) avant de faire une PR histoire de faire un peu mieux pour respecter de respecter la charte graphique Jeedom et d’améliorer l’UI.

La page en question : desktop/modal/eqLogic.configure.php

J’ai ajouté 2 boutons et un numéro de ligne dans le tableau, le but étant de reproduire ce que j’avais fait en utilisant des inputs

Le principe est ici, comme souvent, est de charger en PHP puis de reconstruire l’affichage depuis une fonction JS quand on clique sur un bouton

Je mets l’ensemble du fichier à la fin du post mais si je ne montre que ce qui permet l’ajout de la partie qui n’existait pas :

La partie PHP :

                    $tr .= '<td data-line="' . $i . '" data-column="0" style="width: 4%;">';
                    $tr .= '<a id="bt_removeRow" class="bt_removeRow pull-left" style="margin-right: 15px;"><i class="fas fa-minus-circle"></i></a>';
                    $tr .= $i;
                    $tr .= '<a class="bt_addRow pull-right" style="margin-right: 15px;"><i class="fas fa-plus-circle"></i></a>';
                    $tr .= '</td>';

La partie en JS :

            var newTr = document.createElement('tr')
            let newFirstCol = '<td data-line="' + i + '" data-column="0" style="width: 4%;">'
            newFirstCol += '<a id="bt_removeRow" class="bt_removeRow pull-left" style="margin-right: 15px;"><i class="fas fa-minus-circle"></i></a>'
            newFirstCol += i
            newFirstCol += '<a class="bt_addRow pull-right" style="margin-right: 15px;"><i class="fas fa-plus-circle"></i></a>'
            newFirstCol += '</td>'
            newTr.insertAdjacentHTML('beforeend', newFirstCol)

L’affichage au chargement de la page ressemble à ça :
image

L’affichage une fois que l’on a cliqué sur le - ou le + est identique (ici j’ai inséré une ligne) :

image
image850×234 8.35 KB

Le problème : Les boutons - et + ne servent plus à rien dès que l’affichage est reconstruit en JS

La fonction JS qui permet d’intercepter n’a plus l’air de servir …

    document.querySelector('#tableCmdLayoutConfiguration').addEventListener('click', function(event) {
...
})

Le code vu des outils de dev au chargement de la page initiale :

image
image694×378 21.8 KB

Le code une fois que le JS rechargé :
image

Je ne vois pas de différence et l’id du tableau ( tableCmdLayoutConfiguration) est bien présent, ainsi que les classes bt_removeRow et bt_addRow :thinking:

Qu’est-ce qui pourrait expliquer que l’instruction addEventListener ne fait plus le job ?

Le code est encore un peu à nettoyer car j’ai pas fini mais voilà le fichier complet (base de Bêta 4.5) :
eqLogic.configure.php.txt (57,1 Ko)

2

Je m’en suis sortit en ajoutant un id sur le div qui est avant l’attribut table et j’ai mis le Listener dessus. Je ne comprends pas trop la différence mais bon … ça marche

Autre problème, je veux ajouter un tips au survol.

Pas de soucis via les commandes en PHP :

$tr .= '<a class="bt_removeRow pull-left" style="margin-right: 10px;" tooltip="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>';

Mais quand c’est généré via le JS, pas de tips :

newFirstCol += '<a class="bt_removeRow pull-left" style="margin-right: 10px;" tooltip="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>'

Que faudrait-il faire ?

3

Bonjour
Y’a une fonction initTooltips je crois de mémoire ou un truc du genre pour les initialiser

4

Hello Loic,

Merci pour ton intervention, j’ai trouvé un truc du genre du coup j’ai ajouté le bloc :

        setTimeout(function() {
         jeedomUtils.initTooltips()
      	}, 500)

ici :

<script>
  if (!jeeFrontEnd.md_eqLogicConfigure) {
    jeeFrontEnd.md_eqLogicConfigure = {
      init: function(_cmdIds) {
        setTimeout(function() {
         jeedomUtils.initTooltips()
      	}, 500)
        if (document.body.getAttribute('data-page') == "eqAnalyse") {
          document.querySelector('#eqLogicConfigureTab > li > a[href="#eqLogic_alert"]').click()
        }
        this.setModal()
....
</script>

Mais ça ne fonctionne pas, je continue de chercher autour de cette fonction jeedomUtils.initTooltips(), j’imagine que je dois mal l’appeler

5

Ah, j’ai enfin trouvé

Tu le sais évidemment, donc pour les autres :

Il faut mettre des « title » :

newFirstCol += '<a class="bt_removeRow pull-left" style="margin-right: 10px;" title="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>'

Et utiliser la fonction sur la variable que l’on a construit, donc dans ce cas : jeedomUtils.initTooltips(newTableLayout)

Merci pour ton aide :slight_smile:

Je pense que j’ai fini là, je vais voir pour faire la PR sur la branche alpha

6

PR faite (ma première sur le core :crossed_fingers:) allow inserting and removing line for layout in design by BisonJeedom · Pull Request #3098 · jeedom/core

2 « J'aime »