[RESOLU] inmage onclick et comportement de celle d'à coté

Avatar du membre
Eléphant du PHP | 224 Messages

02 sept. 2018, 01:43

Hello :D

Un nouveau truc tordu du palmé :P

Alors voilà, aujourd’hui j'ai une boucle pour voter pour des titres passés.
Le vote est simple, deux images , un pouce rouge foncé vers le bas , un vert foncé vers le haut.

Chaque image a un comportement onclick :
- permettant de passé en rouge ou vert lumineux pour indiquer le choix fait.
- appelant une fonction pour appeler une page php permettant de comptabiliser le vote en envoyant l'ID de la musique, l'avis positif ou négatif, et l'IP du poste client pour éviter les votes en rafale ou multiples sur un titre (le script vérifie avant d'enregistrer le vote, si il n'y en a pas déjà un pour le titre et l'IP) et ainsi tricher sur le top 20 qui a lieu chaque semaine.

La fonction :

Code : Tout sélectionner

<script> function voter(avis,track,client) { $.ajax({ type: 'POST', url: 'votage.php?track='+track+'&client='+client+'&avis='+avis }); }; </script>
Et l'image (ici je mets que le code de celle du pouce rouge, histoire de pas surcharger le code) :

Code : Tout sélectionner

<img src="./img/down_off.png" height="18" width="auto" style="vertical-align:middle;" onclick="this.src='./img/down_on.png'; voter('N', '<? echo $songID; ?>', '<? echo $client; ?>')" >
Alors le vote marche très bien, mais j'aimerais que quand ona cliqué sur un pouce, l'image de l'autre pouce ne puisse plus changer si on clique dessus. Je m'explique:
Je clique sur le pouce vert, il devient lumineux, et le vote est comptabilisé.
Je clique sur le pouce rouge, le vote n'est pas comptabilisé (cf. le check énoncé plus haut pour éviter les multivotes) mais il passe quand même en rouge clair alors que j'aimerais qu'il reste foncé.

Bon je me doute que c'est pas du php puisque le php est exécuté coté serveur, mais j'ai aucune idée de comment faire pour que le onclick d'une image puisse interdire celui de l'autre.

Si quelqu'un a une piste à adapter :)

Merciiii
Couin
Un Couin vaut mieux que Deux tu couineras :D
Retrouvez-moi tous les dimanches soir à 22H pour un mix live au vinyle sur eurodance90.fr :mrgreen:

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

02 sept. 2018, 15:35

En javascript tu peux créer une variable qui prendra une certaine valeur quand le clic n'est pas possible et dans ta fonction voter() tu vérifies la valeur de cette variable pour afficher un message "Vous avez déjà voté" par exemple
Quand tout le reste a échoué, lisez le mode d'emploi...

Avatar du membre
Eléphant du PHP | 224 Messages

02 sept. 2018, 15:46

Merci pour ta réponse :)

Mais ce que tu me proposes là éviterait juste de faire plusieurs votes ? Le changement d'image ne serait pas verrouillé ?
Un Couin vaut mieux que Deux tu couineras :D
Retrouvez-moi tous les dimanches soir à 22H pour un mix live au vinyle sur eurodance90.fr :mrgreen:

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

02 sept. 2018, 16:21

Ah j'avais pas compris "down_on.png", c'est ton image changé c'est ça ?
Si oui, il faut juste que tu fasse le changement d'image pas immédiatement dans le onclick() mais dans ta fonction voter() qui va d'abord vérifier si tu as le droit de voter ou pas, si le vote est ok, alors tu changes l'image, sinon tu affiches un message sans changer
Quand tout le reste a échoué, lisez le mode d'emploi...

Avatar du membre
Eléphanteau du PHP | 18 Messages

03 sept. 2018, 01:56

Tu peux aussi utiliser des ID ou une Classe sur tes images et supprimer le 'onclick' dans ta fonction "voter". Ce qui évite par la même occasion de faire d'autres appels inutile à la base de données.

$('.maclasse').attr('onclick', ''); ou encore $('.maclasse').unbind('click');

Ceci dit à chaque refresh ou nouvelle visite de ta page par un même utilisateur, le changement de couleur se fera une nouvelle fois. Pour éviter cela il faudrait faire la vérification au chargement de la page également si tu ne le fais pas déjà. Cela permet aussi à la personne de savoir qu'elle à déjà voté pour une musique si elle revient plus tard.

Avatar du membre
Eléphant du PHP | 224 Messages

03 sept. 2018, 02:09

Hello :)

C’est vrai que l'énoncé de mon problème est un peu fouillis pour piger lol
Je vais essayer d'expliquer plus simplement.
Par défaut j'ai pour chaque ligne de titre non voté :
heure de diffusion - down_off up_off - titre

Soit je clique sur down_off , il passe en down_on , le vote est pris en compte (sauf si déjà voté up avant), ce qui fait down_on up_off
Soit je clique sur up_off , il passe en up_on, le vote est pris en compte (sauf si déjà voté up avant), ce qui fait down_off up_on

J'ai commencé par essayer de juste faire changer l'image en passant par une fonction, à force de chercher sur le net , je suis parvenu avec ce code :

Code : Tout sélectionner

function changeimgdn(monimage) { monimage.src = (monimage.src=="./img/down_off.png" ) ? "./img/down_off.png" : "./img/down_on.png"; } function changeimgup(monimage) { monimage.src = (monimage.src=="./img/up_off.png" ) ? "./img/up_off.png" : "./img/up_on.png"; }
et en mettant pour l'image :

Code : Tout sélectionner

<img src="./img/down_off.png" onclick="changeimgdn(this); voter('N', '<? echo $songID; ?>', '<? echo $client; ?>')" ><img src="./img/down_off.png" onclick="changeimgup(this); voter('N', '<? echo $songID; ?>', '<? echo $client; ?>')" >
Evidement, j'arrive au même résultat qu'avant.

A part ca , je ne m'en sors absolument pas du tout , je n'y connais rien au javascript :(
Un Couin vaut mieux que Deux tu couineras :D
Retrouvez-moi tous les dimanches soir à 22H pour un mix live au vinyle sur eurodance90.fr :mrgreen:

Avatar du membre
Eléphant du PHP | 224 Messages

03 sept. 2018, 02:12

Ah bah je rédigeais ma réponse pendant que tu as posté, Correlatif.

Alors au chargement de la page, oui, les votes déjà enregistrés pour ce client (si l'ip est inchangée) sont affichés et ne permettent pas d'appeler la fonction voter.

Par contre pour le début de la réponse, je suis encore plus noyé :( C’est un peu con pour un canard lol
Je ne m'en sors pas du tout :(
Un Couin vaut mieux que Deux tu couineras :D
Retrouvez-moi tous les dimanches soir à 22H pour un mix live au vinyle sur eurodance90.fr :mrgreen:

Avatar du membre
Eléphanteau du PHP | 18 Messages

04 sept. 2018, 02:22

Qu'est ce que tu ne comprends pas ?

Coté JS si je reprend ton premier exemple de function ça donne quelque chose dans ce style : (tu utilises bien jQuery ?)
<script>
function voter(avis,track,client) {
            $('.voteclass').prop('onclick', null); 
            $.ajax({
                type: 'POST',
                url: 'votage.php?track='+track+'&client='+client+'&avis='+avis
            });
            };
</script>
Pour tes images tu ajoutes juste la class
<img class='voteclass' src="./img/down_off.png" height="18" width="auto" style="vertical-align:middle;" onclick="this.src='./img/down_on.png'; voter('N', '<? echo $songID; ?>', '<? echo $client; ?>')" > <img class='voteclass' src="./img/up_off.png" height="18" width="auto" style="vertical-align:middle;" onclick="this.src='./img/up_on.png'; voter('N', '<? echo $songID; ?>', '<? echo $client; ?>')" >
Si tu as plusieurs votes possible sur une même page, Il faudra faire quelques modifs. Créer une incrémentation coté PHP par exemple pour personnalisé chaque class/image avec un chiffre ou autre chose.

Maintenant avec ton second exemple tu pourrais faire ceci:
<script>
voted = 0;

function changeimgdn(monimage) { 
        if( !voted )
	monimage.src = (monimage.src=="./img/down_off.png" ) ? "./img/down_off.png" : "./img/down_on.png"; 	
        voted = 1;
}
function changeimgup(monimage) { 
        if( !voted )
	monimage.src = (monimage.src=="./img/up_off.png" ) ? "./img/up_off.png" : "./img/up_on.png"; 	
        voted = 1;
}  
</script>

Avatar du membre
Eléphant du PHP | 224 Messages

23 sept. 2018, 02:40

Hello,

Désolé pour ce moment d'absence, souci de connexion et surtout j'ai eu et dois encore travailler sur d'autres points qui ont pris priorité sur celui ci. Je vais voir à étudier ca :)

M'ci :)
Un Couin vaut mieux que Deux tu couineras :D
Retrouvez-moi tous les dimanches soir à 22H pour un mix live au vinyle sur eurodance90.fr :mrgreen:

Avatar du membre
Eléphant du PHP | 224 Messages

27 sept. 2018, 05:16

Yop !!

Alors j'ai fais marcher un peu la boite à cerveau , et en m'inspirant de l'incrémentation d'id d'image , je suis parvenu au résultat souhaité.

En gros j'ai viré this.src='./img/down_on.png et this.src='./img/up_on.png sur les images des pouces rouge et vert, mais je les ai repris dans la fonction.
J'ai ajouté un id d'image de type "N239" et "P239" , où bien sur , 239 est un exemple car c'est correspondant à un numéro de ligne de titre à voter.
Et dans la fonction, voilà ce que j'ai fais :

Code : Tout sélectionner

function voter(v,avis,track,client) { if (avis == 'N') { document.getElementById( 'N'+v ).src = "./img/down_on.png"; document.getElementById( 'P'+v ).onclick = null; } if (avis == 'P' ) { document.getElementById( 'P'+v ).src = "./img/up_on.png"; document.getElementById( 'N'+v ).onclick = null; } $.ajax({ type: 'POST', url: 'votage.php?track='+track+'&client='+client+'&avis='+avis }); };
En gros, le clic sur une image permet de la changer et de désactiver l'autre image de la même ligne.

Merci beaucoup pour les pistes données :)
Un Couin vaut mieux que Deux tu couineras :D
Retrouvez-moi tous les dimanches soir à 22H pour un mix live au vinyle sur eurodance90.fr :mrgreen: