Nested Editing and Ajax Override

shaadak@gmail.com

How can I use an Ajax override in the nested editor. I am having a hard times setting it up.

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

shaadak@gmail.com

Or actually a parent-child editor that is nested with ajax override

allan

If we take this example, on line 26 of the code shown below the table:

ajax: '../php/joinNested.php',

that is the Ajax line for the nested Editor. It is there that you would specify the function you wish to use if you don't want to use the default Ajax request.

For parent child editing, in this example, line 34 is where the Ajax object is specified.

Regards,
Allan

shaadak@gmail.com

Thanks Allen, I will try this out

shaadak@gmail.com

Hello Alex,
I tried but on edit and on delete I get the following error DataTables warning: table id=parent - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/

shaadak@gmail.com

Here is my code. I even changed it to all be local and not submit - still get an error message

shaadak@gmail.com

var editor;

$(document).ready(function () {
// $("#myModal").modal('show');

var crData = new Promise(function (resolve, reject) {
    resolve(KBR_ListCRUD.Data.getAllListItems("Proto", "", KBR_ListCRUD.Data.successGeneric)) // only getting the data that is not archived
})

Promise.all([crData])
    .then(function (values) {
        var cr = values[0].d.results; // this is an array of Customer requests once promise is fulfilled
        //            console.log(cr);


        var siteEditor = new $.fn.dataTable.Editor({
            fields: [{
                label: 'Item:',
                name: 'item'
            }, {
                label: 'Cost:',
                name: 'cost',

            }
            ],
        });



        editor = new $.fn.dataTable.Editor({
            // data: cr,
            table: '#parent',
            idSrc: "Title",
            fields: [
                {
                    label: 'Title:',
                    name: 'Title'
                },
                {
                    label: 'Items:',
                    name: 'JSONSTR',
                    type: 'datatable',
                    // def: sessionStorage.getItem('todo'),
                    editor: siteEditor,
                    optionsPair: {
                        value: 'id',
                    },
                    config: {

                        buttons: [
                            { extend: 'create', editor: siteEditor },
                            { extend: 'edit', editor: siteEditor },
                            { extend: 'remove', editor: siteEditor }
                        ],
                        columns: [
                            {
                                title: 'item',
                                data: 'item'
                            },
                            {
                                title: 'Cost',
                                data: 'cost'
                            }
                        ]
                    }
                }
            ]
        });


        $('#parent').DataTable({
            dom: "Bfrtip",
            data: cr,

            columns: [
                { data: "Title" },
                { data: "JSONSTR" },

            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });


        editor.on('create', function (e, json, data) {

            console.log(data)


            KBR_SuccessFunction_Table.updateItem(data, 'create')

        });

        editor.on('edit', function (e, json, data) {
            console.log(data);

            KBR_SuccessFunction_Table.updateItem(data, 'update')

        });

        editor.on('remove', function (e, json, data) {

            var filter = "?$filter=(Title eq '" + data[0] + "' )";

            KBR_ListCRUD.Data.deleteListItems("Proto", filter)

        });
    });

})

colin

Please can you post the response from the server. It's saying it's invalid, so it would be worth seeing it. Also, take a look at the technical note referenced in the error message - that'll give some diagnostic steps on how to resolve.

Colin

shaadak@gmail.com

Uncaught TypeError: Cannot set property 'data' of null
at ua (jquery.dataTables.min.js:50)
at Xb (jquery.dataTables.min.js:122)
at x.<anonymous> (jquery.dataTables.min.js:123)
at x.iterator (jquery.dataTables.min.js:114)
at x.<anonymous> (jquery.dataTables.min.js:123)
at Object.reload (jquery.dataTables.min.js:116)
at a.refresh (dataTables.editor.min.js:99)
at a.Ub [as _dataSource] (dataTables.editor.min.js:61)
at a.<anonymous> (dataTables.editor.min.js:127)
at a.dispatch (jquery-3.5.1.js:5429)

shaadak@gmail.com

I just cannot figure out which property is null

shaadak@gmail.com

Interesting enough, it does update the local table - which is the first step my getting my code to work. I then would want to pass the data from the nested one and save it a JSON.stringfy to a text field in my table

allan

That's a client-side error message. My guess is that the response from the server is null. Can you show us the response from the serve like Colin asked please?

Even better would be a link to a page showing the issue.

Thanks,
Allan

shaadak@gmail.com

I honestly would love to be able to give you the link - but we are behind the firewall. I am a client side developer and do not have access to the servers. The server is a Sharepoint Server and I am reading data from a SharePoint List

shaadak@gmail.com

So my goal here is to be able to create the nested Editor locally and then submit it as a stringyfied JSON object to a multi-text field in the same List

shaadak@gmail.com

I am going to try to create a server at home and create the same environment and send you a link. In the meantime, is there anything that you can think of that you see in the code that is wrong that is causing this.

shaadak@gmail.com

Maybe I can ask my question a different way:
on Line 36 of my code - which is defining the nested editor, is there anyway that I can have that information not coming from my data but a separate local array instead?

allan

Line 36 above is name: 'JSONSTR', - is that the line you meant?

Could you show me the JSON return from the server when you are getting the Cannot set property 'data' of null error please?

Thanks,
Allan

shaadak@gmail.com

Hmm you have a point - The Value that server returns for JSONSTR is null because my string is "". So I just changed the code to on line 36 to parse the string to be JSON. I still have the same issue

{
                        label: 'Items:',
                        name: 'JSONSTR',
                        type: 'datatable',
                        data: function (data, type, set) {
                            if (data) {
                                return JSON.parse(data)
                            }
                            else return {}
                        },
                       
                        editor: siteEditor,
                        optionsPair: {
                            value: 'DT_RowId',
                        },
                        config: {

                            buttons: [
                                { extend: 'create', editor: siteEditor },
                                { extend: 'edit', editor: siteEditor },
                                { extend: 'remove', editor: siteEditor }
                            ],
                            columns: [
                                {
                                    title: 'item',
                                    data: 'item'
                                },
                                {
                                    title: 'Cost',
                                    data: 'cost'
                                }
                            ]
                        }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The Value that server returns for JSONSTR is null because my string is ""

If it is to be a list of options, should it not be an array? Or perhaps a JSON string representation of an array? Are you expecting it to be null or empty string when the list of options is empty perhaps? What does it look like when there are options in it?

Allan

shaadak@gmail.com

it would initially be null, but it can be is JSON.stringify(whateverItNeedstoBe) once submitted

shaadak@gmail.com

If that makes sense

allan

Editor 2 introduced the new fields.getFormatter and fields.setFormatter options which I think might be useful here.

label: 'Items:',
name: 'JSONSTR',
type: 'datatable',
getFormatter: function (value) {
    return JSON.stringify(value);
},
setFormatter: function (value) {
    if (value === null) {
        return [];
    }

    return JSON.parse(value);
},
editor: siteEditor,

That assumes that JSONSTR is either null or a valid JSON array. I haven't added any error handling, which you might want to do. It will submit the value from the datatable field as a string (a JSON string).

Allan

shaadak@gmail.com

Hi Allen,
Thanks for the input. This is the error that I am getting now on line 77 which is really line 12 on what you have posted.

VM1897:1 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at a.setFormatter (proto.js:77)
at a._format (dataTables.editor.min.js:142)
at g (dataTables.editor.min.js:138)
at a.multiSet (dataTables.editor.min.js:138)
at a.<anonymous> (dataTables.editor.min.js:35)
at Function.each (jquery-3.5.1.js:387)
at a.Wa [as create] (dataTables.editor.min.js:35)
at x.action (dataTables.editor.min.js:148)
at g (dataTables.buttons.min.js:14)
setFormatter @ proto.js:77
a._format @ dataTables.editor.min.js:142
g @ dataTables.editor.min.js:138
a.multiSet @ dataTables.editor.min.js:138
(anonymous) @ dataTables.editor.min.js:35
each @ jquery-3.5.1.js:387
Wa @ dataTables.editor.min.js:35
action @ dataTables.editor.min.js:148
g @ dataTables.buttons.min.js:14
(anonymous) @ dataTables.buttons.min.js:15
dispatch @ jquery-3.5.1.js:5429
elemData.handle @ jquery-3.5.1.js:5233

shaadak@gmail.com

I think the error is due to get formatter and setformatter being reversed. However once I correct that I the syntax error is corrected but the initial issue persists

allan

That error suggests to me that JSONSTR is not a valid JSON string. As I mentioned there is no error handling - so perhaps change it to be:

<br>label: 'Items:',
name: 'JSONSTR',
type: 'datatable',
getFormatter: function (value) {
    return JSON.stringify(value);
},
setFormatter: function (value) {
    if (value === null) {
        return [];
    }
 
    try {
      return JSON.parse(value);
    } catch(e) {
      console.warn('INVALID JSON', value);
      return [];
    }
},
editor: siteEditor,

And let me know what the error message shows.

The set and get formatter are the right way around there. setFormatter is called when a value is set into the form (not when it is set into the database, which has its own formatters at the server-side).

Allan