JQuery ajax div

Question

J'ai une liste de contacts comme ceci.

NameOfContact Accept 
NameOfContact2 Accept 
...... 

Où "Accepter" est un lien. Lorsque je clique sur "Accepter", je veux envoyer une requête ajax avec l'identifiant du contact. Lorsque l'appel ajax revient, il doit supprimer le lien Accepter et afficher le résultat.

Donc, si je clique sur Accept bouton de contact 2 le résultat devrait être:

NameOfContact Accept 
NameOfContact2 Added 
...... 

Im en utilisant les urls amicaux par exemple d'accepter un contact l'URL est:

/action/accept/12345 

où 12 345 est l'identifiant du contact.

Mon html est comme ça (Im génère le code HTML dynamiquement côté serveur c'est à quel point le résultat devrait ressembler):

John 
    <div id="choice"> 
    <a id="accept" name="accept" href='/action/accept/12345'>Accept</a> 
    </div> 

Kate 
<div id="choice"> 
    <a id="accept" name="accept" href='/action/accept/55555'>Accept</a> 
    </div> 

Et mon Jquery est comme ceci:

$(document).ready(function(){ 
     $('#accept').click(function(e){ 
      e.preventDefault(); 
      sendAcceptRequest(e.target, e); 
     }); 
    }); 
    function sendAcceptRequest(target, e){ 
     $.post(target, 
     function(data){ 
      $('#choice').html(data); 
     }, "html"); 
    } 

Mon problème est que je ne sais pas comment faire la différence entre plusieurs divs de choix. Je sais que je peux ajouter l'identifiant comme ceci 'choice12345' mais je voudrais dans la fonction sendAcceptRequest obtenir le parent de e (le parent de l'href, c'est l'élément div) et ajouter le résultat à ce div, mais je ne savoir comment obtenir le parent de e et ajouter le résultat. Des idées?

Answer 1

Dans votre exemple, vous avez les mêmes valeurs pour vos attributs id. Les ID doivent être uniques car ils sont censés être l'identification d'un élément. Utilisez les attributs de classe dans votre cas.

Kate 
<div id="kate" class="choice"> 
<a class="accept" name="accept" href='/action/accept/55555'>Accept</a> 
</div> 


$(document).ready(function(){ 
    $('.accept').click(function(e){ 
     e.preventDefault(); 
     sendAcceptRequest(e.target, e); 
    }); 
}); 
function sendAcceptRequest(target, e){ 
    $.post(target, 
    function(data){ 
     // this needs to be change to unique identify which element you want the html to be inserted 
     $('.choice').html(data); 
    }, "html"); 
} 

Answer 2

Pour développer ce darren dit: Après avoir modifié les id des classes, ajoutez ce sélecteur dans votre fonction sendAcceptRequest pour trouver l'objet .choice pour remplacer le lien « Accepter » avec « Ajouté ». Bien sûr, ce serait après que le poste soit couronné de succès.

$('.choice a[href=' + $(target).attr('href') + ']').parent().html('Added');