Nested Editing and Ajax Override

shaadak@gmail.com · August 2021

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 · August 2021

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

allan · August 2021

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 · August 2021

Thanks Allen, I will try this out

shaadak@gmail.com · August 2021

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 · August 2021

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

shaadak@gmail.com · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

I just cannot figure out which property is null

shaadak@gmail.com · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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

shaadak@gmail.com · August 2021

If that makes sense

allan · August 2021

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 · August 2021

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 · August 2021

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 · August 2021

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

Nested Editing and Ajax Override

Nested Editing and Ajax Override

Replies

Howdy, Stranger!

Categories

DataTables

Nested Editing and Ajax Override

Nested Editing and Ajax Override

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables