How to update row in the table when data is updated using ajax mvc

Question

I have a data table and some data is displayed with in it i have Add Edit and Delete option once the New data is added based up on response i am appending the row to table

  GetServerData("Supplier/AddSupplier/", Supplierdetails, function (data) {

    if (data != null) {
       var row = "";
        var Address = data.Address;
        var Area = data.Area;
        var SupplierId = data.SupplierId;
        var SupplierName = data.SupplierName;         
        var Email = data.Email;
    }

    row += "<tr><td>" + SupplierId + "</td><td>" + SupplierName + "</td><td>" + Address + "</td><td>" + Area + "</td><td>" + Email + "</td><td><i class='tbl_edit_btn fa fa-edit Editsupplier' onclick=\"EditSupplier(" + SupplierId + ")\"></i><i class='tbl_del_btn fa fa-trash' data-id=" + SupplierId + "></i></td></tr>"

    $('#suplierlistbody').append(row);
});

If i delete row i am removing tr based on the responce i am removeing the row

var url = "DeleteSupplier";
$('.DeleteSupplier').click(function () {
    var row = $(this).closest('tr');
    $.post(url, { id: $(this).data('id') }, function (response) {
        if (response) {
            row.remove();
        }
    }).fail(function (response) {
        alert("Delete Failed");
    });
});

Now I want to edit a row from the table so I have a icon at last column once I click that it will go data base fetches data and binds it to html form

function EditSupplier(SupplierId) {

GetServerData("Supplier/GetSupplierById/" + SupplierId, null, function (data) {

    $('#supplier_Id').val(data.SupplierId);
    $('#supplier_name').val(data.SupplierName);
    $('#supplier_address').val(data.Address);
    $('#supplier_area').val(data.Area);       
});
}

and i have button below form

 <button type="button" id="update">update</button>

on update click iam collecting values form text box and passing to controller so that it updates my database if i refresh my page my table is updated but i want to do it with out refresh

$(document).on('click', '#updatesupplier', function () {

var SupplierId = $('#supplier_Id').val();
var SupplierName = $('#supplier_name').val();
var Address = $('#supplier_address').val();
var Area = $('#supplier_area').val();

 var Supplierdetails = {
        "SupplierId":SupplierId,
        "SupplierName": SupplierName,
        "Address": Address,
        "Area": Area,
}
     GetServerData("Supplier/UpdateSupplier", Supplierdetails, function(data){
// Here iam getting updated data back now i show modify my table row
});

Here is my table

    <table class="table " id="suppliertable">
       <thead>
          <td>S.NO</td>
          <th>Supplier name</th>
          <th>Address</th>
          <th>Area</th>
          <th>E-mail</th>
          <th width="100">Action</th>
       </thead>
<tbody id="suplierlistbody">
       @foreach (var items in Model)
       {
       <tr>
          <td>@items.SupplierId</td>
          <td>@items.SupplierName</td>
          <td>@items.Address</td>
          <td>@items.Area</td>
          <td>@items.Email</td>
          <td>
             <i class="tbl_edit_btn fa fa-edit Editsupplier" onclick="EditSupplier(@items.SupplierId)"></i>
             <i class="tbl_del_btn fa fa-trash Deletesupplier" data-id="(@items.SupplierId)"></i>
          </td>
       </tr>
       }
    </table>

How Can i update Particular row with latest data... Thanks

You could add the supplierId to the <tr id="1"> and then on update replace the origional with the new one. Or you could try knockout.js which will handle this for you. — KevDevMan
– KevDevMan, Commented Apr 22, 2015 at 15:54

Community · Accepted Answer · 2017-05-23 12:01:29Z

2

Updated, try something like below:

GetServerData("Supplier/UpdateSupplier", Supplierdetails, function(data){

    var supplierSelector = "td:contains('"+ data.SupplierId + "')";

    //find and save parent row into variable using .closest() function
    $supplierRow = $(supplierSelector).closest("tr");

    //update name which is the 2nd td element
    $supplierRow.find("td:nth-child(2)").text(data.SupplierName);

    //update Address which is the 3rd td element
    $supplierRow.find("td:nth-child(3)").text(data.Address);

    //update Area which is the 4th td element
    $supplierRow.find("td:nth-child(4)").text(data.Area);

    //update Email which is the 5th td element
    $supplierRow.find("td:nth-child(5)").text(data.Email);

});

First :contains selector is used to find td with that has the updated SupplierId, after which .closest() method is used to find the nearest parent tr element. For the updates .find() is used to find the correct td element and finally .text() updates the supplier with the latest data. Here's another useful link in relation to table selectors.

Note I haven't tested the above code, but I hope the above helps you to get latest data updates on to your table elements.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Apr 22, 2015 at 16:25

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Venkata Krishna Reddy Over a year ago

Thanks @jyrkim It works Made changes in line 2 closing of Double Quotes var supplierSelector = "td:contains('"+ data.SupplierId +"')";

jyrkim Over a year ago

@VenkataKrishnaReddy Cheers for the tip, I corrected the code now :-)

Collectives™ on Stack Overflow

How to update row in the table when data is updated using ajax mvc

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related