Update cell data after ajax call?
Update cell data after ajax call?
ferran_munoz
Posts: 28Questions: 7Answers: 0
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();
},
});
}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You need to pass a cell
cell-selectorinto thecell()API so Datatables knows the cell you want to update. Assuming$(elem).closest('tr').find('td:eq(2)')finds thetdelement you want to update you can do something like this:Or maybe from the examples where you see something like
table.cell.data(newData).draw();you would do this:Kevin
Well, when want to select the cell, gives me "undefined"
EDIT: Oh yeah, now it works. Thanks again Kevin!
You have:
Do these work?
Not sure where you placed
var td = $(elem).closest('tr').find('td:eq(2)');. Its hard to know whatelemis in context offunction changeLockedState(elem). The point is you need to get the cell you want to update to pass into thecell()API.Kevin
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.