.replaceWith() ne fonctionnant qu'une seule fois

Question

J'essaie de mettre en place un système de réputation des utilisateurs de mon site. Ainsi, vous pouvez voir le numéro de représentant après le nom de l'utilisateur chaque fois qu'il interagit (par exemple, chaque fois qu'il fait un commentaire). Il existe également un système de vote qui modifie également la réputation de l'utilisateur et je souhaite que le numéro de représentant reflète ce changement. J'appelle donc un fichier via ajax qui renvoie le nouveau numéro de rep pour cet utilisateur. Le fichier html/php est quelque chose comme la première instance (s'il fait un poste):

echo '<div class="rep_user_id" id="rep_user_id_'.$posts_row['userid'].'"> '.$posts_row['user_rep'].'</div>'; 

puis (s'il fait un commentaire):

echo '<div class="rep_user_id" id="rep_user_id_'.$com_row['userid'].'">'.$com_row['user_rep'].'</div>'; 

les deux me donnent ceci:

<div class="rep_user_id" id="rep_user_id_110">293</div> 

Puis les js:

function change_reps() { 
var userid = $('.rep_user_id').attr('id').replace('rep_user_id_',''); 
$.ajax({ 
url: "vote/get_reputation.php", 
data: "userid="+userid, 
success: function(server_response){ 
$("body").ajaxComplete(function(event, request){ 
    var reputation = server_response; 
    $('#rep_user_id_'+userid).replaceWith(''+reputation); 
    $('#rep_user_id_'+userid).effect("highlight", {color:'red'}, 1000); 
}); } }); } 

Cette fonction est appelée après succès d'un autre ajax (pour mettre à jour rep et votes). Donc, à partir de cela, ce qui fonctionne: une fois que je clique sur une flèche vers le haut ou vers le bas, je peux voir le compteur de votes vers le haut ou vers le bas mais je ne vois que le représentant. Pourquoi change-t-il seulement une fois et pas tout le document? A quelque chose à faire que la section des commentaires est appelée à partir d'un autre fichier (avec un include)? Pour info, l'effet fonctionne dans tous les cas! J'espère que vous pouvez aider. Merci

EDIT: Depuis que j'ai vu que je ne m'expliquais pas très bien, j'ajoute quelques lignes de plus. Le problème est que je ne peux pas modifier plusieurs éléments avec le même identifiant et la même classe une seule fois (par opposition à changer un élément plusieurs fois). Donc, j'ai 293 plusieurs fois tout au long de la page, mais le code affiché change un seul élément! C'est ce qui déclenche change_reps():

$("body").on("click", ".vote_com_up", function(){ 
    var com_id = $(this).attr('id').replace('vote_com_up_',''); 
    $.ajax({ 
    url: "vote/comment_vote.php", 
    data: "com_action=2&com_id="+com_id, 
    success: function(server_response){ 
    $(".vote_com_number").ajaxComplete(function(event, request){ 
    if(server_response == 'voted') 
     { alert("Ya has votado en este post!");} 
    else{ 
     var new_com_votes = server_response; 
     $("#vote_com_number_"+com_id).html(+new_com_votes); 
    } }); } 
    }).done(function() { 
    change_reps(); 
    }); 
    return false; 
}); 

J'ai fait une petite jsFiddle pour montrer ce que je veux:

http://jsfiddle.net/CMgYb/1/

SOLUTION: Bryan Naegele avait raison: je avais besoin des classes au lieu de ids.

Answer 1

Cela a probablement quelque chose à voir avec le fait que vous sélectionnez un ID qui saisira la première occurrence de cet ID. Vous devez utiliser des classes.

Answer 2

Vous accédez à cet élément par id, puis en le remplaçant par avec quelque chose de nouveau. La seule façon dont cela fonctionnera une seconde fois est de savoir si ce que vous le remplacez a le même identifiant qu'avant; Je suppose que non.

Êtes-vous sûr que vous ne voulez pas définir le contenu de cet élément avec la fonction html:

$('#rep_user_id_' + userid).html('' + reputation); 

EDIT

En regardant de plus près à votre PHP, il ne semble comme vous l'avez codé jusqu'à remplacer réellement la div entier. Cependant, je recommanderais de ne pas coder votre PHP pour générer les ID d'élément corrects. Envisager de réduire ce PHP afin que vous envoyez juste le contenu de la div. Ensuite, vous pouvez utiliser beaucoup plus simplement html comme ci-dessus.

Answer 3

Selon les docs jQuery:

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

Ce que cela signifie est que lorsque vous faites:

$('#rep_user_id_'+userid).replaceWith(''+reputation); 

Il change:

<div class="rep_user_id" id="rep_user_id_110">293</div> 
//to 
293 

Donc, la deuxième fois déclenche l'ajax il ne peut pas trouver l'id rep_user_id. Le moyen le plus simple de résoudre ce problème serait de changer le innerHTML avec text() (note: vous pouvez également utiliser hml() mais dans ce cas text() fonctionne mieux car il n'y a pas de balises html).

$('#rep_user_id_'+userid).text(reputation);