Inline editing - save new values on button click

Question

I have following code for jQuery DataTables:

Contact.DataTable = $('#otable').DataTable( {
"ajax": {
                "url" : '/Contact/' + Contact.id,
                "dataSrc": function(check) {
                      return check.data;
                },
             },
            "responsive": true,
            "columns": [
                { "data": "id"},
                { "data": "category", "sClass": "category" },
                { "data": "name", "sClass": "name" },
                { "data": "lname" },
                {
                      "render": function ( data, type, method, meta ) {
                       return Contact.saveContact(method);
                    }
                },
            ]
        } );

Datatable - dropdown - inline edit:

$('#otable tbody').on('click', '.category', function () {    //second column
    var row = this.parentElement;
    if(!$('#otable').hasClass("editing")){
        $('#otable').addClass("editing");
        var data = Contact.DataTable.row(row).data();
        var $row = $(row);
         var thiscategory = $row.find("td:nth-child(2)");
        var thiscategoryText = thiscategory.text();
        thiscategory.empty().append($("<select></select>",{
            "id":"category" + data[0],
            "class":"in_edit"
        }).append(function(){
            var options = [];
            $.each(Categories, function(key, value){
                options.push($("<option></option>",{
                    "text":value,
                    "value":value
                }))
            })
            return options;
        }));
        $("#category" + data[0]).val(thiscategoryText)
    }
})

;

For changing values in dropdown

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
            var val = $(this).val();
            $(this).parent("td").empty().text(val);
            $('#otable').removeClass("editing");
        });

Below code for saving new values(after inline edit) while clicking save:

$('#divsave').on("click", ".saveContact", function() {
        var data = Contact.DataTable.row($(this).closest('tr')).data();
        // Here I have to get new values after inline editing  - but getting old values
    });

My problem is : while clicking edit, in 'data', I am getting old values in the row of datatable, not the modified value after inline edit

datatable view - 1:

datatable - dropdown in column:

datatable after inline editing:

What I need: Save modified row while clicking 'save' image - currently it saves older value before inline editing(datatable view - 1)

davidkonrad · Accepted Answer · 2015-08-14 13:21:23Z

2

When using dataTables it is generally a very bad idea to manipulate the DOM <table> or any content by "hand" - you should always go through the dataTables API.

Thats why you are getting "old values" - you have manipulated the content of the <table>, or so it seems - dataTables are not aware of those changes.

In a perfect world you should refactor the setup completely (i.e to use the API) but I guess you can solve the issue by using invalidate() on the row being changed in order to refresh the dataTables internals :

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
    var val = $(this).val();
    $(this).parent("td").empty().text(val);

    //add this line to refresh the dataTables internals
    Contact.DataTable.row($(this).parent("tr")).invalidate(); 
    //

    $('#otable').removeClass("editing");
});

answered Aug 14, 2015 at 13:21

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

8 Comments

Futuregeek Over a year ago

Thanks David. Since I can't use editor plugin, that was the only way I can implement inline editing and save.

Futuregeek Over a year ago

Seems like this also not working - var data = Contact.DataTable.row($(this).closest('tr')).data(); and alert(data.category) - still displays the old value.

Gyrocode.com Over a year ago

@Futuregeek, the answer above is correct, however when using DataTables 1.10.8, there is an issue with invalidate() function. I have reported the issue at github, however make sure you're using 1.10.7 until this issue is resolved.

Futuregeek Over a year ago

Thanks Gyrocode.com. I am not able to remove the datatables as it is used by many other applications in my project. And the version is 1.10.0-dev. need to look up for some other code to fix this issue.

Gyrocode.com Over a year ago

@Futuregeek, I would recommend using 1.10.7 instead. Do you see any errors in the console, when using code suggested by David?

|

Collectives™ on Stack Overflow

Inline editing - save new values on button click

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related