Update A row with client side ajax implemetation
Update A row with client side ajax implemetation
Hi,
We are trying to achieve the same behaviour like this example:
https://editor.datatables.net/examples/inline-editing/simple.html
where an update to a cell returns from the server the updated row which is than refreshed.
The difference is that we are implementing the calls to the server using a REST API and than passing the updated row to the datatable using the
$('#XXX').DataTable().row(rowIndex).data(result);
We receive an error:
https://datatables.net/manual/tech-notes/4
A few things that we don't recieve:
1. We don't see the nice refresh row effect.
2. When we try to edit the cell again it opens for edit, but throws the a null pointer exception in the following line:
// Remove from DOM, keeping event handlers, and include text nodes in remove
var children = node.contents().detach();
Thanks,
Yishay
This question has accepted answers - jump to:
Answers
We got $('#XXX').DataTable().row(rowIndex).data(result);
to work, but it goes again through the ajax attribute function that in turn refresh the entire datatable.
We also tried
$('#'+ scope.id).dataTable().fnUpdate(dt.data[scope.dtIndex], scope.dtIndex, undefined, false, false);
But in this case the edited field stayed in edit inline and than we start receiving the same error as my previous post.
Hi Yishay,
Is your REST API returning the JSON data that Editor expects?
Allan
Hi Allan,
We done the following:
1. We attached a function to the editor ajax (with the API of function (method, url, data, successCallback, errorCallback))
2. On Edit, we call the server from the javascript (Using promises).
3. When the request returns We do the following:
scope.mergeRowsData(result.aaData); // Merging the data returned from the server with local instance of the full table information.
successCallback({data:serverResponse.aaData}); // Calling the editor ajax success callback.
When We tried passing only the data of the edited line (like in the link you sent) the table refreshed to show only that row.
I need to add that we also have an ajax function on the datatable (function (data, callback, settings)).
Thanks,
Yishay
Are you able to give me a link to the page in question please? I don't know of any reason why only the edited row would be the only one shown if you return JSON in the expected format.
Thanks,
Allan
Hi Allan,
sorry, but it's not a public site, I'll be happy to schedule with you a skype/gotomeeting and show you the behavior and code.
Thanks,
Yishay
Certainly - live support is available under the priority support options.
Alternatively, if you could show me the Javascript you are using and also the returns from your API I might be able to piece it together.
Allan
Hi Allan,
sure, but We are talking about thousands code lines, could you focus me on what you want to see exactly?
In the editor ajax:
1. We have a code that take the returned information and merge it with the local UI information (from the previous calls, representing the entire table).
2. Than we call successCallback.
After this the table rerenders so we jump to the datatable ajax
There we process the data and pass it the callback from the ajax signature.
Thanks,
Yishay
Let's start with the Editor initialisation (
new $.fn.dataTable.Editor) and the output of:just prior to
successCallbackbeing called (which I presume is in theajaxfunction).Allan
Hi Allan,
Great focusing! thanks.
this is Editor initialisation (JSON.stringify(editorOpt)):
I'll have another post for the other part.
Thanks,
Yishay
Here is the data before the successCallback
Thanks,
Yishay
Thanks - I'll take a look in the morning.
Hi Allan,
did you had the chance to take a look into this one?
Many thanks,
Yishay
Could you also show me your DataTables configuration please?
The
dataarray above appears to have two different objects in it. Did you edit two different rows? Also it appears to have a really complex data structure relative to the simplefields.nameproperty values that you show in the Editor code above.Are you still using
row().data()or any other DataTables API method around this part of the code? Can you show me how you are using that if you are (which really shouldn't be required).Allan
Hi Allan,
| Could you also show me your DataTables configuration please?
We do it dynamically with:
tElement.DataTable(tableOptions);
This is the tableOptions (it couldn't be stringify, tell me if you need anything else):
No, only one.
No.
// This function takes the information from the server and manipulate it to the structure used by the datatable.
// This function takes the partial information from the server (only the edited row) and embed it with the rest of the information shown in the table.
Thanks,
Yishay
If only a single row was edited, could you clarify why the server is returning two items in the
dataarray?Also there isn't an
ajaxoption in your Editor configuration. Was that missed from the above, or are you not specifying one? Editor currently does require that.Allan
Hi Allan,
this is not the data from the server.
The server returns only one row, but me merge it with the save information from the full ajax call and we send the merged result to the success callback.
If we send only the returned row to the callback the datatable refreshes to show only one row.
Thanks,
Yishay
It sounds like the merge might be shallow then. That would explain where there are two elements in the
dataarray rather than one. I would expect there to be only one when only a single row is updated. Could you confirm if this is the case.If there is any way of giving me a link to the page that would really help speed things up so I can see the code and debug it live, rather than guessing at what options and methods might be getting used.
Allan
Hi Allan,
Maybe we can open a user for you to connect the system with and send you a link, but I can't do it in the forum, can you send me an email?
Thanks,
Yishay
If you could drop me a PM, which you can do by clicking my name above and then the "Send message" button, that would be great.
Thanks,
Allan
In the PM (thanks) the link you gave shows a table with a single row. When I change the "Asset Prototype" value it updates and it appears to correctly show the updated data.
Could you give me details on how to recreate this error?
Thanks,
Allan
Hi Allan,
again thank you for your continues help on this issue.
I added a row to the table so you can see the phenomenon.
The code currently rerender the entire table when the ajax returned the updated row (because calling the successCallback with only the returned row rerender the table to show only one row).
Look in the code for:
scope.mergeRowsData(result.aaData);
this is where you want to break and instead of using
successCallback({data:serverResponse.aaData});
you can send
successCallback({data:result.aaData});
Than you will see the table refreshing to show only one row.
Thanks,
Yishay
If I use
successCallback({data:result.aaData});then the following is shown on the console:Which is correct, the object in the
aaDataarray does not contain adataContainerparameter.I don't fully understand the
mergeRowsDatafunction - but it looks like it is adding items to the array, not just merging the single row that was edited.Additionally it appears to be modifying
serverResponserather thanresult, hence why the data is missing from theresult.aaDataarray.Finally I don't actually see it doing a merge - it is just adding indexes to the row. In jQuery we would use
$.extend()to merge objects together. There is probably something similar in Angular, but I'm afraid I don't know what it is.I think in summary, the data array that is being passed into the callback function does not currently contain the data required to display the modified row.
Allan
Hi Allan,
the merge was done because we didn't understand why sending the response to the success callback didn't refreshed only the updated row, bu the entire datatable instead.
Do we need to add a dataContainer to our aaData, will that solve the issue?
If so, where should this attribute reside in the response structure?
Many thanks,
Yishay
Hi Allan,
did you had the chance to think about this?
Thanks,
Yishay
It would only refresh the full table if server-side processing was enabled. I'm afraid I can't recall at the moment if your table does have server-side processing enabled or not?
To resolve the issue you need to pass the callback function an object which as a
dataproperty, which in turn contains the object with data for each row that was edited.Allan
Hi Allan,
I'm not sure what we changed, but now it works
I just changed:
scope.mergeRowsData(result.aaData);
successCallback({data:serverResponse.aaData});
To this:
//scope.mergeRowsData(result.aaData);
successCallback({data:result.aaData});
And it works, the weird thing here, is that I already tried that before We started the conversation, I'm not sure what else We changed that helped
Anyhow, many thanks for your help,
Yishay
Super - great to hear that it is working :-)
Allan
Hi Allan,
It was too early to celebrate, we were successful in calling successCallback (pun intended
), but still we still get a full refresh of the table 
Can you help us in understanding why it doesn't work?
We are using the following code in the ajax parameter for the case of one line update:
But the entire table is rerendered.
Thanks,
Yishay
By the "entire table", do you mean that all rows in the
tbodyare updated? If so, that is expected in a server-side processing draw (which it looks like the above is). Callingcallbackinajaxwill tell DataTables "here is the data I want you to render - render it!".Allan
Hi Allan,
be passed only the wanted row to the function why was the entire datatable rerendered?
In this example is the entire datatable rerendered in each update?
Thanks for quick responses,
Yishay