how to get data from updated table row after setting value to the specific td using jquery

shintu Babu

After a successful form submission I update the datatable row values with new values using jQuery. That part is shown below.

//////////////Form Submision//////////////
$('#btnSaveCallRegisterTable').click(function () {
if (confirm('Do you want to ' + formAction + ' data ?', 'YES', 'No')) {
                    $.CCAjax("/Service/SaveServiceCall", form.serializeArray(),
                        function (data) {
                            var jsonData = JSON.parse(data);
                            console.log(jsonData);
                            if (jsonData["Response_Code"] === 200 || jsonData["Response_Code"] === "200") {
 $('#thisDivSuccessAlert').html('<div id="divAlert" class="alert alert-success alert-dismissible"><button class="close" aria-hidden="true" type="button" data-dismiss="alert">×</button><b><i class="icon fas fa-check"></i>' + jsonData.Response_Message + '. Please note the reference number : ' + jsonData.Call_Id + ' for future reference. </b></div>');
                                    console.log(jsonData);
                                    var slctdIndex = idx + 1;
                                    var Call_details = $('#Call_Details').val();
                                    var Contact_No = $('#Contact_No').val();
                                    var Requested_By = $('#Requested_By').val();
                                    var Call_Type = $('#Call_Type_Id1 option:selected').text();
                                    var Product = $('#Product_Id1 option:selected').text();
                                    $('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(4)').text(Product)
                                    $('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(5)').text(Call_Type)
                                    $('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(6)').text(Call_details)
                                    $('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(7)').text(Requested_By)
                                    $('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(8)').text(Contact_No)
}
 }); 

After that the td value is updated with the new value.
Then I select the row for editing I get the previous row data values but I want updated row values

///Edit  the table row/////

 $('#btnEditCallRegisterTable').click(function () {
 var rowToUpdate = [];
            if ($('#CallRegisterTable tr.selected').length !== 1) {
                
                    alert("Please Select One Row To Edit!!!");
                    return false;
            }

            var index = $.SetRowId();
            var datatable = $("#CallRegisterTable").DataTable();
            //Row to Edit
            var EditRow = datatable.cells({ row: index, column: 0 }).data()[0];
           // console.log(EditRow);
  var jsonObjectUpdateData = {};
            $.each(EditRow, function (key, value) {
                jsonObjectUpdateData[key] = value;
            });
            jsonObjectUpdateData["Data_Status"] = 'U';
            rowToUpdate.push(jsonObjectUpdateData);
            $.CCAjax("/Service/CallRegisterEditForm", { requestData: jsonObjectUpdateData },
                function (data) {
                    $(".call-register-form").html(data);
                }
            );


});
//CCAjax is a customized ajax call. //$.SetRowId() is the selected row index.

//controller action
[HttpPost]
public ActionResult CallRegisterEditForm(ServiceCallRequestModel requestData)
{
   return CCPartialView("_CallRegisterEditForm", requestData);
}

after successful form submission table row data changed after that again i selected the same row in that table ,my form rendered with old table row data but i need updated row data values .Can anyone guide me to achieve it.

kthorngren

This FAQ explains the problem.

Kevin

shintu Babu

is there any specific solution

kthorngren

is there any specific solution

I would opt for using the row().data() API to update the data but in your case since the HTML update is working then row().invalidate() is probably the easiest. First you will need to get a row-selector to choose the row. You can use a jQuery object for this so something like this might work:

$("#CallRegisterTable").DataTable()
    .row( $('table tr:nth-child(' + slctdIndex + ')') )
    .invalidate()
    .draw();

Use this after the last of these statements:
$('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(8)').text(Contact_No)

Kevin

shintu Babu

The table row data remains the same when i use row().invalidate().draw()

kthorngren

You may need to use the dom parameter:

dom - use the data currently held in the DOM

See the row().invalidate() docs for more details.

Kevin

shintu Babu

sir i have table with so many rows.i select one row for edit ,i fetch the data from row using below jquery

    var index = $.SetRowId();
            var datatable = $("#CallRegisterTable").DataTable();
            //Row to Edit
            var EditRow = datatable.cells({ row: index, column: 0 }).data()[0];
var jsonObjectUpdateData = {};
            $.each(EditRow, function (key, value) {
                jsonObjectUpdateData[key] = value;
            });
            jsonObjectUpdateData["Data_Status"] = 'U';
            rowToUpdate.push(jsonObjectUpdateData);

using this json array i place these td values to the corresponding inputs in the form and changed some fields in the form ,then i click submit button and show a success message .At the same time that td values changed. For changing td values i use

var Call_details = $('#Call_Details').val();
 $('table tr:nth-child(' + slctdIndex + ')').find('td:nth-child(6)').text(Call_details)

using the above code td value changed. After that again i selected that same row for editng i get the prevous values in form inputs.

*when i use row().invalidate().draw() code after the above code table row has no change. i need to affect both form and table after successful updation

shintu Babu

i select a row in table for edit. that values placed into the inputs at the form. After successful submission table row changed with updated values in form. Again I fetch the same row and placed into corresponding form input field but form input field shows the previous td vales before first update.

*i used row().invalidate() after td vale setting but that time td has no change that means updated values not affected in table.

kthorngren

Did you add the dom parameter as I suggested? Like this?

$("#CallRegisterTable").DataTable()
    .row( $('table tr:nth-child(' + slctdIndex + ')') )
    .invalidate( "dom" )
    .draw();

Where do you add it?

Kevin