Bonjour à tous !

J'ai (encore) une question (décidément j'ai plus de mal que prévu avec JS son framework jQuery).
J'ai un tableau comportant des éléments. L'utilisateur peut voter pour l'un des éléments.
A ce moment la, le bouton de vote devient grisé pour cet élément, et le background-color du <td> contenant l’élément vire au vert clair (grâce à animate() de jQuery).

Tout ceci MARCHE.

Tout se corse si l'utilisateur veut changer son vote : répéter le comportement ne pose aucun pb, mais il ne peut y avoir qu'un seul "préféré". Il faut donc "dé-griser" le bouton de l'ex préféré et supprimer le background-color vert.

Pour le moment je fais ainsi :

<?php
// On remet tout à zéro
echo '$("td[id*=\'td_\']").animate({ backgroundColor: "#FFF" }, 1000);';
echo '$("img[id*=\'link_\']").attr(\'src\', \'design/icons/vote.png\');';

// On s'occupe du nouveau préféré
echo '$("#td_'.$_GET['os_id'].'").animate({ backgroundColor: "#6F9" }, 1000);';
echo 'document.getElementById("vote_'.$_GET['os_id'].'").onclick = function(){ return false; };';
echo '$("#link_'.$_GET['os_id'].'").attr(\'src\', \'design/icons/vote_already.png\');';

Le problème c'est que tout se fait de façon décalé dans le temps.
D'abord le fond vert disparait, puis le fond devient vert sur le nouveau préféré, puis le bouton du nouveau préféré devient gris.
Je voudrais que l'ex-préféré redevienne normal en même temps que le nouveau est mis en valeur.

D'autre part, mon code me semble un peu bidouillé, j'ai l'impression d'avoir bricolé mais je pense qu'il y a moyen de faire bcp plus propre, mais je n'ai pas les connaissances requises poru faire mieux.

Je vous demande donc conseil Merci.

Je serais ravi de t'aider si tu pouvais montrer un code propre, parce que du JS généré en PHP c'est un peu laid.

Refais le code (au moins pour nous) en enlevant le PHP avec des retours à la ligne et indentations car là ça donne pas envie. En plus ligne 8 je vois un document.getElementById() alors que tu utilises jQuery...

Okay, alors, en imaginant un vote pour l'ID n°1 :

// On remet tout à zéro
$("td[id*='td_']").animate({ backgroundColor: "#FFF" }, 1000);
$("img[id*='link_']").attr('src', 'design/icons/vote.png');

// On s'occupe du nouveau préféré
$('#td_1').animate({ backgroundColor: "#6F9" }, 1000);
document.getElementById('vote_1').onclick = function(){ return false; };
$('#link_1').attr('src', 'design/icons/vote_already.png');

Pour ce qui est du document;getElementById() c'est parce que pour le onclick je n'y suis pas arrivé avec jQuery cf mon post

Voilà !

J'essayerai de venir voir s'il te (vous) manque des infos, malheureusement là je ne usis plus chez moi je n'ai plus accès au code source.

JS : document.getElementById('vote_1').onclick
jQuery : $('#vote_1').click

Pour ta demande, au clic tu dois faire une condition, par exemple si le fond est vert c'est que l'élément à été voté, sinon...

Pour .clic() j'avais pas réussi avec, je ré-essayerai.

Pour ce qui m'interesse vraiment, en gros c'est une foction toggle que tu me suggères ?
Mais dans ce cas, toutes les actions auront bien lieu en même temps ? Parce que j'y arrive déjà, c'est juste pas synchro.

Merci pour ton aide, réccurente au fil des sujets.

Ben c'est à toi de "synchro", un if() dans un .click suffit à mon sens, il te permettra de déterminer l'état de la chose (.css()), tu agis ensuite en conséquence.

Rhaaa, flûte !
C'est pas exactement le sujet du topic à la base mais vu qu'on en parle ici et que l'autre est en résolu...

J'ai retenté avec le .click() et rien a faire, ça ne marche pas :

<?php
echo '$("#dismissPhone0").live("click", function(){dismissPhone("'.$Token.'", 1);return false;});';

echo 'document.getElementById("dismissPhone0").onclick = function(){dismissPhone("'.$Token.'", 1);return false;};';

La première ligne ne marche pas, la seconde si. Pourquoi !?!
Je laisse volontairement en PHP car le problème vient du Token qui n'est pas changé, ce n'est pas le bon pour la première ligne, malgré le fait que les deux lignes aient été testée exactement au même endroit du code, l'une à la place de l'autre.

Erreur Firebug ?

Non aucune erreur, d'ailleurs c'est logique : le script se comporte comme prévu : il renvoie une erreur car le token n'a pas été changé par .click() alors qu'il l'est quand j'utilise la méthode classique...

En tout cas, rien dans FireBug.

EDIT : j'ai compris le problème, sans pour autant savoir comment le corriger.

Le problème c'est que .click() ne changeant pas le code source de la page, le onclick="fct_a_lorigine" reste le même. L'ancienne fonction est donc appelée quand on clic sur le lien en plus de la nouvelle (appelée par .click()). L'ancienne n'étant plus valide (ancien token expiré), elle renvoie une erreur, pendant que la nouvelle, appelée par .click() fait bien son boulot.
Aucun idée de comment bloquer l'ancienne.

jQuery, c'est cool pour bcp de chose, mais franchement y'a de grosses limitations...

Essaye de supprimer le contenu de l'attribut onclick en faisant $('#dismissPhone0').attr('onclick', '');

Arg ça devient pénible...
Avec ça j'ai cru crier victoire, mais non. Ça marche une fois de plus, puis ça replante...