JQuery ajax div

Question

I Have a a list of contacts like this.

NameOfContact  Accept
NameOfContact2 Accept
......

Where "Accept" is a link. When I click "Accept" I want to send an ajax request with the id of the contact. When the ajax call returns it should remove the Accept link and display the result there.

So if i click on Accept button of contact 2 the result should be:

NameOfContact  Accept
NameOfContact2 Added
......

Im using friendly urls so for example to accept a contact the url is:

/action/accept/12345

where 12345 is the contact id.

My html is like this (Im generating the html dynamically in server side this is just how the result should look like ):

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>

And my Jquery is like this:

$(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");
    }

My problem is that I don't know how to differentiate between many choice divs. I know I can add the id like this 'choice12345' but I would like in the sendAcceptRequest function get the parent of e (the parent of the href, that is the div element) and append the result to that div, but I dont know how to get the parent of e and append the result to it. Any ideas?

Answer 1

In your example you have the same values for your id attributes. id's have to be unique as they are supposed to be an element's identification. Use class attributes in your case.

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

To expand on what darren said: After you change the id's to classes, add this selector in your sendAcceptRequest function to find the .choice object to replace the "Accept" link with "Added". Of course this would be after the post is successful.

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