Question

I have a table where i want to be to both select a row and delete a row, but i can’t figur out how to do this with JQuery. The code i have only effects the first row in the table. So i can remove the first row but no other. What is wrong. Here is what i tried:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#newCandidatesTable").tablesorter();
        var candidateID = $("#candidateID").text();

        // Event actions
        $("#acceptCandidateButton_" + candidateID).click(function(e) {
            $.post("/Admin/AcceptCandidate/", { candidateID: $("#candidateID").text() }, completeAccept());
        });

        // Functions
        function completeAccept() {
            showMsgBox($("#candidateName").text() + " er blevet accepteret, som ansøger til stillingen: ...");
            $("#tr_" + candidateID).remove();
        }

        function getFirstNameFromFullName(fullName) {
            var nameArray = new Array();

            nameArray = fullName.toString().split(" ");

            return nameArray[0];
        }
    });
</script>
<h2>Nye ansøgere</h2>
<table id="newCandidatesTable">
    <thead>
        <tr>
            <th style="cursor: pointer;">ID</th>
            <th style="cursor: pointer;">Navn</th>
            <th style="cursor: pointer;">Email</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
<% foreach (var candidate in Model)
{
     %>
        <tr id="<%= "tr_" + candidate.iAnsogerID %>">
            <td><div id="candidateID"><%= candidate.iAnsogerID %></div></td>
            <td><div id="candidateName"><%= candidate.vNavn %></div></td>
            <td><div id="candidateEmail"><%= candidate.vEmail %></div></td>
            <td>
                <div id="<%= "acceptCandidateButton_" + candidate.iAnsogerID %>" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;">Godkend</div>
            </td>
        </tr>
     <%
} %>
</tbody>
</table>

Answer 1

I think you need to wrap your event hookup in a foreach to iterate over the collection of items you have.

$("#candidateID").each(function() {
  // Event actions
  var candID = this.text;
  $("#acceptCandidateButton_" + candID).click(function() {
    $.post("/Admin/AcceptCandidate/", { candidateID: candID }, completeAccept());
  });
});

I’ve not had the chance to test this but if nothing else it should get you on the right track.

I guess you could also do this directly in your page generation loop, i.e.:

<td>
  <div id="<%= "acceptCandidateButton_" + candidate.iAnsogerID %>" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;" onclick="$.post("/Admin/AcceptCandidate/", { candidateID: " + candidate.iAnsogerID + " }, completeAccept())">Godkend</div>
</td>