HTML table will not update after Ajax call

Question

I'm using Ajax to delete a row from my Roles table. I can add the role and allow the user to delete the role from a link for each row. The function works and deletes row in database but the table is not updated after the event. It looks like the row never got deleted to the user. Do I need to reload the view? Not sure how to make the screen refresh to reflect only the remaining rows.

<div id="roleTable">
<table class="table">
    <tr><th>Role</th><th>Description</th><th>Delete</th></tr>
    @{int count = 0;}
    @foreach (var b in ViewBag.roles)
    {
        string color = "";

        if (count % 2 == 0)
        {
            color = "";
        }
        else
        {
            color = "success";
        }
        count++;

        <tr class=@color id="roleRow-@b.RoleGUID">
            <td>@b.Role</td>
            <td>@b.Description</td>
            <td><a href="#" class="removeLink" data-id="@b.RoleGUID"  onclick="return confirm('Are you sure');">Remove</a></td>
        </tr>
    }
</table>
</div>
<p id="result">

</p>

The jQuery Code:

<script>
    
    $("#roleTable").on("click",".removeLink", function () {
        
        var roleToDelete = $(this).attr("data-id");

        if (roleToDelete != '') {

            $.post("/UserRoles/RemoveRole", { "RoleGUID": roleToDelete },
                 function (data) {
                     $("#roleRow-" + roleToDelete).fadeOut('slow');
                     $("#result").text(data.Message).fadeOut(5000);

                 });
        }

    });
   

</script>

There is no need to add an `id` attribute to each row. You can just use `$(this).closest('tr').remove();`. And the correct way to access the `data-id` value is `var roleToDelete = $(this).data("id");` — , Dec 16 '15 at 22:23

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

You need to fadeOut the cells and not the row. You can remove the row after the fadeOut, but if you want the fade effect you'll have to use something like this:

$("#roleRow-" + roleToDelete + " td").fadeOut('slow');

This question might help you achieve the exact effect you're looking for.

edited May 23 '17 at 12:23

Community

1
1

answered Dec 16 '15 at 19:20

A.O.

3,733
6
30
49

Thanks, but what I discovered now was the top or bottom row will not fade out. They are deleted from database but still display on screen. The rows between the top and bottom will fade out. – r lo Dec 16 '15 at 19:39

score 0 · Answer 2 · answered Dec 16 '15 at 23:06

0

Just call this code

$("#roleRow-" + roleToDelete).remove();

In place of

$("#roleRow-" + roleToDelete).fadeOut('slow');

answered Dec 16 '15 at 23:06

pratikpawar

2,038
2
16
20

The problem of just the top or bottom row remaining is still happening. I will continue to look up some information of why I can't get jQuery to fade or remove the very top or bottom rows of the table. It works just on rows in between the top and bottom. Thanks for your help though. – r lo Dec 17 '15 at 01:51

score 0 · Answer 3 · answered Dec 17 '15 at 13:33

Thanks for everyone's suggestions. The code that worked for me after working through the suggestions is :

 $('#roleRow-'+roleToDelete).closest('tr').remove();

For some reason a call to $(this) did not work and needed to use $('#roleRow-'+roleToDelete)

HTML table will not update after Ajax call

3 Answers3