How to intercept editor received data, does editor call dataSrc?

larry.danberger@nubium.com

Hi,
I am trying to get editor working with Django rest server, which requires modifying sent and received data for datatables to use.
For viewing data datatables is working.
For editing, I have the send piece working, data is sent and updated back end. But the response from the PUT needs work.
Without modification I get 'SCRIPT5007: Unable to get property 'length' of undefined or null reference', datatables.editor.js (5150,18). No surprise since the returned data is {row of data} not datatables required {data: [{row of data}]}.
I tried using success: function(data) however documentation says not to overwrite this as datatables needs it, and sure enough it gets stuck in the editor focus and doesn't work. Doesn't give me SCRIPT5007 error though.
I tried specifying dataSrc for editor but this doesn't seem to get called for an editor response.

         $(document).ready(function () {
             console.log("in sources ready: " + window.location.href);
             var csrftoken = Cookies.get('csrftoken');
             editor = new $.fn.dataTable.Editor({
                 ajax: {
                     create: {
                         type: 'POST',
                         url: '/api/sources/',
                         headers: { "X-CSRFTOKEN": csrftoken }
                     },
                     edit: {
                         type: 'PUT',
                         contentType: 'application/json',
                         url: '/api/sources/_id_/?format=json', 
                         headers: { "X-CSRFTOKEN": csrftoken, "content-type": "application/json" },
                         data: function (d) {
                             var newdata;
                             $.each(d.data, function (key, value) {
                                 newdata = JSON.stringify(value);                                          //will only return one, for inline we're editing only one.   we don't send datatables format we only send one row from data element
                                 console.log("ajax data new data...:" + newdata);
                             });
                             console.log("ajax data new data:" + newdata);
                             return newdata;
                         },
                         dataSrc: function (json) {                                                   
                             console.log("ajax edit dataSrc");
                             for (var i = 0, ien = json.data.length ; i < ien ; i++) {                     // pattern from datatables.net/reference/option/ajax.dataSrc    NOT GETTING CALLED.  this should fail until fixed here with same error as 
                                 console.log("ajax dataSrc ...: ",i,json.data[i][0]);                      //        SCRIPT5007: Unable to get property 'length' of undefined or null reference    datatables.editor.js (5150,18)
                             }
                             return json.data;
                         },
//                         success: function (d) {                                                             // datatables site says don't overwrite this as datatables needs it internally.  if not included here we get unable to get property 'length'...
//                                                                                                             //     since server is not returning json string in format datatables needs.  Use dataSrc to modify received data, if it gets called...
//                                 console.log("ajax PUT success! d:", d);
//                             },
                         error: function (e) {
                             console.log("ajax PUT error!", e);
                         },
                         submitComplete: function (d) {
                             console.log("ajax submitComplete! ", d);
                         }
                     },
                     delete: {
                         type: 'DELETE',
                         url: '/api/sources/',
                         headers: { "X-CSRFTOKEN": csrftoken }
                     },
                 },      //ajax
                 table: "#doctable",
                 dataSrc: function (json) {
                     console.log("editor dataSrc");
                     return json;
                 },
                 idSrc: "id",
                 fields: [{

I also tried specifying dataSrc function outside of ajax for editor but that doesn't appear to get called either.

I tried recreating in live but a) editor.min.js is giving error (so I changed that to editor.js) and b) getting 'object doesn't support this action', does editor work in live?
http://live.datatables.net/qufonusa/1/

thanks,
-Larry

allan

Hi Larry,

Thanks for your question, the details and also for picking up the support option!

You are correct that Editor doesn't have its own ajax.dataSrc option (possibly it should - I'm still dithering on how exactly to align the two sets of options!). However, it does have its postSubmit event which can more or less be used for the same thing. The server must return valid JSON for postSubmit to be triggered (even if it is just {}), but you can then use that event handler to manipulate the data returned from the server into the format that is expected by Editor.

What is the response data from the server?

Regards,
Allan

larry.danberger@nubium.com

Hi Allan,

I had tried postSubmit but it wasn't firing either.
I also tried stubbing in valid data (as below) so the server response data doesn't matter, didn't fire.

Is this dependent on using the ajax function instead of the ajax object (which I'm currently doing)? I had switched to the function to try use callback but had different issues.

             editor.on('postSubmit', function (e, json, data, action) {
                 console.log("in postSubmit");
                 console.log("e", e);
                 console.log("json", json);
                 console.log("data", data);
                 console.log("action: ", action);
                 var newdata;
                 newdata = { "data": [{ "id": 1, "name": "myfname", "authorityname": "myfauthority", "doctype": "fhtx", "url": "newfurl", "uiurl": "myfuiurl", "rtemplateid": 1, "modifieddatetime": null, "modifieduser": "ld" } ]};
//                 newdata = ' { "data": [' + JSON.stringify(json) + '] }'; //note it needs an array so added []
                 console.log("postSubmit newdata:", newdata);
                 json = newdata;  //JSON.stringify(newdata);
                 console.log("postSubmit json after:", json);
             });

...console log does not show 'in postSubmit' or the rest.

thanks,
-Larry

allan

Hi Larry,

I had tried postSubmit but it wasn't firing either.

That would occur if valid JSON is not returned from the server. The postSubmit is the very first thing that Editor does in its success handler, so the only thing that should prevent it from being called is the success not being triggered.

What is the status code your PUT request is returning? Also is it returning valid JSON? Overriding the error method for the Ajax handler would stop Editor's own error handling from being triggered.

Allan

larry.danberger@nubium.com

Hi Allan,
it is returning valid JSON, below is example from fiddler. The url field is the one I edit, it returns the updated value and when I check the backend MySQL database the field has been updated. I'll send you further details via email.

{"id":1,"name":"Hydrostatic Test Water Management Guidelines","description":"http://www.capp.ca/getdoc.aspx?DocId=179764&DT=NTV","authorityname":"CAaaa CAPP Canadian Association of Petroleum Producers","doctype":"","url":"ffffeeedddccccbbbaaahttp://www.capp.ca/getdoc.aspx?DocId=179764&DT=NTV","uiurl":"http://www.capp.ca/getdoc.aspx?DocId=179764&DT=NTV","rtemplateid":null,"modifieddatetime":null,"modifieduser":null}

allan

Hi Larry,

I sent a reply by e-mail, but just for completeness in this thread should anyone find it in future, I've copied my reply in below.

The cause for the issue is that the success property of the Ajax response is being overwritten. As your comment in the code notes, the documentation states that this should not be done. If you do overwrite it, then Editor can't execute its own success callback!

Remove that it it should then execute your postSubmit event handler. You you then use something like:

    editor.on( 'postSubmit', function ( e, json, data, action ) {
        var rowData = $.extend( {}, json );

        json.data = [ rowData ];
    } );

It means json still has the properties of the row in it at the top level - you could delete them if you want, but Editor will just ignore properties it doesn't know about.

Regards,
Allan

larry.danberger@nubium.com

Hi Allan,
yes it worked, thank you!
The edit only works once in edge but with chrome it works as expected, can click on other cells and edit/return, backend is updated. In edge all events are lost including general body onclick etc as per FAQ.. Since edge works fine with your other examples I'm assuming it is something else I've done. :(
thank you,
-Larry

allan

Hi Larry,

I must admit I'm at a little bit of a loss with this one at the moment. Using the IE profiling tools I can see that jQuery is seeing the click event, but it isn't calling the event handler for the click for some reason. Even if I add additional events they aren't called either. However, if you sort on a column and then click to edit, that works!

Could you try using jQuery 2.2.4 please: jQuery 2.2.4: https://code.jquery.com/jquery-2.2.4.js . It shouldn't make any difference, but I'd like to check.

If it doesn't help, can you drop it back to jQuery 1.12.3, but instead of the min version, could you use the debug version so I can debug the event handlers in jQuery?

Thanks,
Allan