Input checked de même identifiant ajax

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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>

Pièce jointe 611937

17/01/2022, 12h02
Toufik83
Bonjour,
Code:

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

1 pièce(s) jointe(s)

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:

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>

Pièce jointe 611945

17/01/2022, 14h42
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"...

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:

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:

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()
        })
    }
 
}

17/01/2022, 15h45
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 ?

1 pièce(s) jointe(s)

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:

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:

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:

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:
Pièce jointe 611956

17/01/2022, 16h54
NoSmoking

Bonjour,
on ne devrait jamais voir :

Code:

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:

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

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

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:

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:

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:

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>

18/01/2022, 07h24
NoSmoking

Citation:

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 ?

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

Code:

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:

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:

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

Citation:

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:

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