[jQuery] Changement de onclick via Ajax

Bonjour à tous !

Cela va faire 4 jours que je cherche a faire quelque chose qui me semblait très simple, sans pourtant y arriver.

J'ai une page bête et méchante, dans laquelle j'ai un liens :

<a id="link" href="#" onclick="fct('a1b2c3d4'); return false;" />test</a>

où le paramètre de la fonction ("a1b2c3d4") est un token généré en PHP.

Cet fonction renvoie en fait à un appel Ajax, qui charge une page PHP qui fait son boulot (et ça jusque là ça marche) puis doit pour terminer, doit changer le token du lien en vue d'un nouveau clic.
Et là c'est le drame, impossible de changer ce fichu token.

Après des heures et des heures de recherches j'en étais arrivé à ça :

$("#link").live("click", function(){fct("nouveau token");return false;});

Vous vous en doutez, si je suis là, c'est que ça ne marche pas.
Enfin en réalité, si, mais l'ancienne fonction, celle présente à l'origine, au premier chargement de la page est toujours appellée, avant la nouvelle lancée par .live(), avec l'ancien token et renvoie donc un message d'erreur.
Autrement dit, la nouvelle fonction est bien executée, mais en plus de l'ancienne au lieu de la remplacer.
J'ai tenté de vider l'attribut onclick avec .attr(), cela me donne le droit à un clic supplémentaire avec que ça plante...

Je déséspère, merci d'avance.
Modifié par Lucky-Strike (14 Jan 2011 - 13:40)

On est bien d'accord que tu me parles de supprimer et non de vider le onclick ? autrement dit, ne pas le placer dans le code source quoi ?
Mais du coup, concrètement, je fais comment ? J'initialise le premier .click() au chargement de la page ?
Du coup, franchement, quel est l'intérêt de jQuery qui complique tout, là où :

document.getElementById("dismissPhone0").onclick = function(){fct("nouveau token", 1);return false;};

fonctionne parfaitement, en une ligne de code ?
(ce n'est pas de la provocation hein, je cherche réellement a comprendre )
Modifié par Lucky-Strike (14 Jan 2011 - 16:27)

Bonjour,

Si je comprends bien, ce n'est pas l'event qu'il vous faut modifier, mais la valeur du token.

Vous pouvez enregistrer la valeur du token dans une variable javascript écrite au chargement de la page en PHP

echo 'var monToken = "acbdefgh";';

Puis dans le callback de votre requete ajax, changez la valeur de cette variable.

Vous pouvez garder le onclick ou passer par jquery, dans les deux cas, il vous suffit d'appeler la fonction

fct(monToken);

Modifié par JDW (14 Jan 2011 - 16:59)

En fait c'est plutôt l'inverse. Un évènement n'est pas une simple variable. Déclarer un évènement, l'attacher au DOM et lui lier une fonction, c'est beaucoup plus lourd que de déclarer une simple variable.

On pourrait faire sans cette variable. Pour cela, il faut unbind le click avant de le redéclarer, mais ça n'a pas tellement de sens logique de procéder ainsi. D'ailleurs, le live ici n'a pas d'utilité. Un simple click suffit (en tout cas pour se que je connais de votre problématique)

Pour comparer, c'est comme si vous écriviez cela :

var MaVariable = function(){ return "valeur";}

En lieu et place de

var MaVariable ="valeur"

J'utilisais à la base un simple click(), mais les résultats n'étaient pas plus concluant (exactement identique a live() d'ailleurs).

J'ai du mal le faire. Pourriez vous me donner le code correspondant a mon cas ? (si ce n'est pas trop demander)

Merci d'avance.
Modifié par Lucky-Strike (14 Jan 2011 - 17:56)

Non, pas encore, mais de quelle partie du code avez vous besoin ?

Du JS.

Okay, voici les différents morceaux intervenants :

<a href="#" id="dismissPhone1" onclick="dismissPhone('{$voteToken}', 0);return false;" title="Changer le mobile"><img src="{$ICONS_PATH}/refresh.png" alt="Refresh" /></a>

Le lien chargé quand on accède a la page (les variables sont générée en PHP puis transmises a Smarty pour l'affichage du template).

la fonction dismissPhone est la suivante (on négligera le 2nd paramètre qui n'a ici aucune utilité) :

function dismissPhone(token, winner){ 
	$.get('scripts/phones_dismiss.php', {token: escape(token), winner: escape(winner)});
}

Cette fonction appelle donc un page PHP qui fait tout son traitement. Après avoir appliqué les modif en base de données, il s'agit de changer le onclick pour un éventuel prochain clic de l'utilisateur.

echo '$("#dismissPhone0").live("click", function(){dismissPhone("'.$Token.'", 1);return false;});';
// j'utilise en réalité cette seconde ligne, la première ne fonctionnant pas
echo 'document.getElementById("dismissPhone0").onclick = function(){dismissPhone("'.$Token.'", 1);return false;};';

Quand j'utilise la première ligne, comme dit plus haut, la fonction est appellée 2 fois : une a cause du onclick pur, avec le token périmé, et une fois avec succès.

S'il manque quoi que ce soit...

Si tu y regarde de plus près, nous n'avons pas modifié grand chose.

le onclick contient une chaine qui est interprété à chaque click.
Le gestionnaire d'évènement jQuery est beaucoup plus puissant.

Pour quelque chose d'aussi trivial que l'appel d'une fonction, il peut certes, sembler moins pratique, mais cela vient du fait que le framework jQuery vient autant avec des fonctions qu'avec une manière de voir le code.

Par exemple, pour un développeur habitué à jquery, il n'y aurait pas du tout eu de onclick, mais juste un évènement click et une variable simple de ce style :

var monToken = "<?=$monToken?>";
$("#dismissPhone1").click(function(){
    $.ajax({ 
        url:"scripts/phones_dismiss.php", 
        data:{token: monToken}, 
        success:function(newToken){ 
           monToken = newToken; 
        } 
    }); 
});

Et c'est tout.