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

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

shintu Babushintu Babu Posts: 5Questions: 1Answers: 0

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.

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    This FAQ explains the problem.

    Kevin

  • shintu Babushintu Babu Posts: 5Questions: 1Answers: 0
    edited September 2020

    is there any specific solution

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2020

    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 Babushintu Babu Posts: 5Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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 Babushintu Babu Posts: 5Questions: 1Answers: 0

    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 Babushintu Babu Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

This discussion has been closed.