Discussion :

[TBA_78]

Bonjour,

J'utilise Bootstrap et js pour activer/désactiver la publication d'article ou bien la mise en avant et je rencontre un conflit:

1/ Je peux activer/désactiver sans problème si je mets en commentaire mon deuxième script pour la mise en avant des articles et donc seulement si mon premier script pour la publication est actif.

2/ Si j'utilise les 2 en même temps cela ne fonctionnent pas pour la mise en avant et de façon aléatoire pour la publication.

Je m'aperçois dans l'inspecteur que l'identification est la même pour mes 2 cases à cocher et je ne sais pas pourquoi alors, si vous pouviez me mettre sur la voie, je vous remercie d'avance.

Script 1:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
// ACTIVATION EN AVANT (portcategory)
let activerPC = document.querySelectorAll("#pc")
for(let boutonPC of activerPC){
    boutonPC.addEventListener("click", function(){
        let xmlhttpPC = new XMLHttpRequest;
 
        xmlhttpPC.open("get", `/admin/article/activer/${this.dataset.pc}`)
        xmlhttpPC.send()
    })
}

Script 2:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// ACTIVATION PUBLISHED 
 
window.onload = () => {
    let activerPB = document.querySelectorAll("#pb")
    for(let boutonPB of activerPB){
        boutonPB.addEventListener("click", function(){
            let xmlhttpPB = new XMLHttpRequest;
 
            xmlhttpPB.open("get", `/admin/article/activer/${this.dataset.pb}`)
            xmlhttpPB.send()
        })
    }
 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
            <td class="tdAdmin text-center" data-title="Publié">
              <input id="pb" class="text-center form-check-input" type="checkbox" {{ (article.published) ? 'checked' : '' }} data-pb="{{ article.id }}" role="switch">
            </td>
            <td class="tdAdmin text-center" data-title="En avant">
              <input id="pc" class="text-center form-check-input" type="checkbox" {{ (article.portcategory) ? 'checked' : '' }} data-pc="{{ article.id }}" role="switch">
            </td>

[Toufik83]

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input id="pb" .../>
<input id="pc"... />

Les lignes sont générés par une boucle, et donc vous aurez plusieurs <input> avec le même id, alors qu'un id doit être unique dans une page HTML.

C'est la raison pour laquelle ton script bug, parce qu'il récupère toujours les valeurs du premier élément (#pc ou #pb).

Il faudrait séparer les id en les concaténant avec un chiffre ( ou article.id par exemple) #pc1,#pc2....,#pb1,#pb2...

[TBA_78]

Merci, j'ai donc essayé de cette façon en concaténant avec les chiffres 1 et 2 mais le comportement est le même:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
            <td class="tdAdmin text-center" data-title="Publié">
              <input id="pb" class="text-center form-check-input" type="checkbox" {{ (article.published) ? 'checked' : '' }} data-pb="{{ article.id ~ 1 }}" role="switch">
            </td>
            <td class="tdAdmin text-center" data-title="En avant">
              <input id="pc" class="text-center form-check-input" type="checkbox" {{ (article.portcategory) ? 'checked' : '' }} data-pc="{{ article.id ~ 2 }}" role="switch">
            </td>

[Toufik83]

Bonjour,

C'est les id qu'il faut modifier, pas les data-pc et data-pb.

Mais attention, car cette modification va tout casser dans js, vu que tu récupères les input avec : let activerPC = document.querySelectorAll("#pc"); et let activerPB = document.querySelectorAll("#pb").

il va falloir modifier le sélecteur "#pc" par [id^="pc"] : let activerPC = document.querySelectorAll("[id^='pc']"); afin de sélectionner tous les éléments ayant un id commençant par "pc", ou bien utiliser une class attribuée aux <chekbox>.

idem pour "pb"...

[TBA_78]

J'ai fait ça mais le comportement reste le même y compris en ne gardant qu'un seul article de test dans ma table:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
            <td class="tdAdmin text-center" data-title="Publié">
              <input id="pb1" class="text-center form-check-input" type="checkbox" {{ (article.published) ? 'checked' : '' }} data-pb="{{ article.id }}" role="switch">
            </td>
            <td class="tdAdmin text-center" data-title="En avant">
              <input id="pc2" class="text-center form-check-input" type="checkbox" {{ (article.portcategory) ? 'checked' : '' }} data-pc="{{ article.id }}" role="switch">
            </td>

Le js (j'ai fais pareil pour l'autre)

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ACTIVATION PUBLISHED 
 
window.onload = () => {
    let activerPB = document.querySelectorAll("[id^=pb]")
    for(let boutonPB of activerPB){
        boutonPB.addEventListener("click", function(){
            let xmlhttpPB = new XMLHttpRequest;
 
            xmlhttpPB.open("get", `/admin/article/activer/${this.dataset.pb}`)
            xmlhttpPB.send()
        })
    }
 
}

[Toufik83]

Ok, maintenant on doit vérifier les actions une par une jusqu'à ce qu'on puisse retrouver l'erreur.

• Au chargement de la page, vérifies que les data-pc et data-pb de ton article son correcte ou pas.
• Mets un console.log() dans la fonction qui gère le clic sur les <checkbox> pour voir la valeur de data-(pb/pc) this.dataset.pb et this.dataset.pc
• Que fait le script serveur `/admin/article/activer/${this.dataset.pb}` ?
• Pourquoi tu envois une requête ajax alors que tu ne traites pas son retour ?

[TBA_78]

Le script server met à 0 ou 1 mon boolean dans ma table et il fonctionne bien si je mets la route "admin/article/activer/published/34" dans mon url mais j'aurais dû faire attention car j'ai fais un console.log et il ne détecte rien au clic alors j'ai fais un script serveur pour chaque action pour ne pas m'embrouiller et cela fait pareil le console.log ne donne rien donc c'est dans le js.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ACTIVATION PUBLISHED 
 
window.onload = () => {
    let activerPB = document.querySelectorAll("[id^=pb]")
    for(let boutonPB of activerPB){
        boutonPB.addEventListener("click", function(){
            let xmlhttpPB = new XMLHttpRequest;
 
            xmlhttpPB.open("get", `/admin/article/activer/published/${this.dataset.pb}`)
            xmlhttpPB.send()
        })
    }
 
}

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// ACTIVATION EN AVANT (portcategory)
let activerPC = document.querySelectorAll("[id^=pc]")
for(let boutonPC of activerPC){
    boutonPC.addEventListener("click", function(){
        console.log()
        let xmlhttpPC = new XMLHttpRequest;
 
        xmlhttpPC.open("get", `/admin/article/activer/portcategory/${this.dataset.pc}`)
        xmlhttpPC.send()
    })
}

Un de mes 2 scripts serveur(sachant que ma route primaire est "/admin/article" ce qui fait bien "/admin/article/activer/published/{id}):

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    #[Route('/activer/published/{id}', name: 'activer_published')]
    public function activerPbArticle(Article $article)
    {
        $article->setPublished(($article->getPublished())?false:true);
 
        $em = $this->doctrine->getManager();
        $em->persist($article);
        $em->flush();
 
        return new Response('true');
    }

Dans l'inspecteur:

[NoSmoking]

Bonjour,
on ne devrait jamais voir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let activerPB = document.querySelectorAll("#pb")

dans du code, les ID devant être unique le queryselectorAll n'a aucun sens et dans ce cas il faut utiliser queryselector ou encore getElementById qui est fait pour cela !

Néanmoins, et même si les supputations de Toufik83 s’avèrent exactes, dans ton cas tu veux traiter les éléments ayant des data-pb et data-pb, pourquoi dans ce cas ne pas cibler ces éléments ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const lesElements = document.querySelectorAll("[data-pb]");

tu pourrais même grouper dans une seule est même boucle forEach.

[TBA_78]

Merci, j'ai essayé sur Firefox parce que je me suis aperçu que l'on pouvait obtenir plus d'informations car je suis sous chrome et paradoxalement, cela fonctionne sur FF mais pas sur chrome et je ne connais pas bien js.

de cette façon les 2 fonctionnent bien sur FF(en changeant les noms des data-active pour les 2):

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// ACTIVATION EN AVANT (portcategory)
 
const lesElements = document.querySelectorAll("[data-active]");
 
for(let boutonPC of lesElements){
    boutonPC.addEventListener("click", function(){
        console.log();
        let xmlhttpPC = new XMLHttpRequest
        xmlhttpPC.open("get", `/admin/article/activer/portcategory/${this.dataset.active}`)
        xmlhttpPC.send()
    })
}

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = () => {
    const lesElements = document.querySelectorAll("[data-active]");
    for(let boutonPB of lesElements){
        boutonPB.addEventListener("click", function(){
            console.log("Ok");
            let xmlhttpPB = new XMLHttpRequest;
 
            xmlhttpPB.open("get", `/admin/article/activer/published/${this.dataset.active}`)
            xmlhttpPB.send()
        })
    }
 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
            <td class="tdAdmin text-center" data-title="Publié">
              <input id="pb" class="text-center form-check-input" type="checkbox" {{ (article.published) ? 'checked' : '' }} data-active="{{ article.id }}" role="switch">
            </td>
            <td class="tdAdmin text-center" data-title="En avant">
              <input id="pc" class="text-center form-check-input" type="checkbox" {{ (article.portcategory) ? 'checked' : '' }} data-active="{{ article.id }}" role="switch">
            </td>

[NoSmoking]

de cette façon les 2 fonctionnent bien sur FF(en changeant les noms des data-active pour les 2)

je ne comprends pas bien ta démarche en affectant un même data-xxx à tes différents éléments, comment sais-tu qui est portcategory et qui est published ?

Il y a donc des éléments pour lesquels tu envoies deux requêtes ?

[TBA_78]

Oui c'est un fait alors en changeant le nom, cela n'arrange rien:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ACTIVATION PUBLISHED 
 
window.onload = () => {
    // let activerPB = document.querySelectorAll("#pb1")
    const lesElementsPB = document.querySelectorAll("[data-activePB]");
    for(let boutonPB of lesElementsPB){
        boutonPB.addEventListener("click", function(){
            console.log("Ok");
            let xmlhttpPB = new XMLHttpRequest;
 
            xmlhttpPB.open("get", `/admin/article/activer/published/${this.dataset.active}`)
            xmlhttpPB.send()
        })
    }
 
}

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// ACTIVATION EN AVANT (portcategory)
// let activerPC = document.getElementById("[id^=pc2]")
const lesElementsPC = document.querySelectorAll("[data-activePC]");
// let activerPC = document.querySelectorAll("#pc2")
for(let boutonPC of lesElementsPC){
    boutonPC.addEventListener("click", function(){
        console.log();
        let xmlhttpPC = new XMLHttpRequest
        xmlhttpPC.open("get", `/admin/article/activer/portcategory/${this.dataset.active}`)
        xmlhttpPC.send()
    })
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
            <td class="tdAdmin text-center" data-title="Publié">
              <input id="pb" class="text-center form-check-input" type="checkbox" {{ (article.published) ? 'checked' : '' }} data-activePB="{{ article.id }}" role="switch">
            </td>
            <td class="tdAdmin text-center" data-title="En avant">
              <input id="pc" class="text-center form-check-input" type="checkbox" {{ (article.portcategory) ? 'checked' : '' }} data-activePC="{{ article.id }}" role="switch">
            </td>

Evidemment le comportement est le même

[NoSmoking]

Oui c'est un fait alors en changeant le nom, cela n'arrange rien:

je ne saisie toujours pas ta démarche avec tes // ACTIVATION PUBLISHED et tes // ACTIVATION EN AVANT (portcategory) !?!

De plus tu ne récupères que data.setactive !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = () => {
  const lesElements = document.querySelectorAll("[data-activePB], [data-activePC]");
  // pour vérifier
  console.log(lesElements)
  for (let boutonPB of lesElements) {
    boutonPB.addEventListener("click", function() {
      //=========================
      // ATTENTION récup. en minuscule
      //=========================
      const dataPB = this.dataset.activepb;
      const dataPC = this.dataset.activepc;
      // pour vérifier
      console.log("Ok", dataPB || dataPC);
      // on traite de façon conditionnelle
    })
  }
}