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 ?