Update cell data after ajax call?

ferran_munoz

Hello!

I have this problem... How can I update the data information after an update made with Ajax? I tried doing something like this in the success code, but it doesn't work.

$(elem).closest('tr').find('td:eq(4)').text(newData);
table.row(id).data(newData).draw();
$(elem).closest('td').text(newData);
$(elem).closest('td').data(newData);
table.cell.data(newData).draw();

So, here is my complete code of the function to update.

function changeLockedState(elem){
    var row = $(elem).closest('tr');
    var id = row.find('td:eq(0)').text();
    var locked = row.find('td:eq(2)').text();

    if(locked=="0"){
        locked = "1";
    }else{
        locked = "0";
    }

    $.ajax({                                      
        url: "{{url('/')}}/updatelockeduser",
        method: "POST",
        xhrFields: {
            withCredentials: true
        },
        data: {"id": id, "locked": locked},
        success: function (data,status,xhr) {
            if(locked=="0"){
                $(elem).closest('tr').find('td:eq(2)').html('<span style="display:none">0</span><span onmouseup="changeLockedState(this)" class="fa fa-times-circle m--font-danger"></span>');
                
               //WRONG: $(elem).closest('tr').find('td:eq(2)').text("0");
            }else{
                $(elem).closest('tr').find('td:eq(2)').html('<span style="display:none">1</span><span onmouseup="changeLockedState(this)" class="fa fa-check-circle m--font-success"></span>');
                
                //WRONG: $(elem).closest('tr').find('td:eq(2)').text("0");
            }
            table.draw();
        },
    });
}

kthorngren

You need to pass a cell cell-selector into the cell() API so Datatables knows the cell you want to update. Assuming $(elem).closest('tr').find('td:eq(2)') finds the td element you want to update you can do something like this:

var td = $(elem).closest('tr').find('td:eq(2)');
table.cell( td ).data(newData).draw();

Or maybe from the examples where you see something like table.cell.data(newData).draw(); you would do this:

var td = $(elem).closest('tr').find('td:eq(2)');
var cell = table.cell( td );  // cell will contain the cell() API for the specified `td`.
cell.data(newData).draw();

Kevin

ferran_munoz

Well, when want to select the cell, gives me "undefined"

EDIT: Oh yeah, now it works. Thanks again Kevin!

kthorngren

You have:

function changeLockedState(elem){
    var row = $(elem).closest('tr');
    var id = row.find('td:eq(0)').text();
    var locked = row.find('td:eq(2)').text();

Do these work?

Not sure where you placed var td = $(elem).closest('tr').find('td:eq(2)');. Its hard to know what elem is in context of function changeLockedState(elem). The point is you need to get the cell you want to update to pass into the cell() API.

Kevin

ferran_munoz

Yes, this of your image works because is the information that I send to Ajax function to update the object in database.

But, the undefined was in the success function of the Ajax. I did the call of the $(elem) there. I declared a global variable to save the $(elem).closest('tr').find('td:eq(2)') and, in the success, the global variable have information and I can update the data and redraw.