Why doesn't the table update after add new

spickens

The application for a new user works as far as entering and validating the data and sending it to the server. But the table does not update to show the newly added data. The postSubmit function is as below.

            editor.on('postSubmit', function (e, json, data, action) {
                console.log("In postsubmit" + action);
                if (action === "create") {

                    json.data = [JSON.parse(json.d)];

                }
            });

A cut and paste from my debugger of the returned data after json.data = [JSON.parse(json.d)]; looks like this..

0:
data:
ENABLED: "1"
FIRSTNAME: "ut"
LASTNAME: "ation"
SALUTATION: "sal"
USERNAME: "user1"

id: 5

__proto__: Object
__proto__: Object
length: 1
__proto__: Array(0)

And the entire create call looks like this..

        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                idSrc: "id",
                ajax: {
                    create: {
                        url: "UserList.aspx/AddUser",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",

                        data: function (d) {
                            return "{ 'json': '" + JSON.stringify(d) + "' }";
                        }
                    },
                    table: "#userListGrid",
                },
                    fields: [{
                        label: "Salutation:",
                        name: "SALUTATION"
                    }, {
                        label: "First Name:",
                        name: "FIRSTNAME",
                        attr: { required: true }
                    },
                    {
                        label: "Last Name:",
                        name: "LASTNAME"
                    }, {
                        label: "User Name:",
                        name: "USERNAME"
                    }, {
                        label: "Enabled?:",
                        name: "ENABLED"
                    }]
            });

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

spickens

Sorry. I pasted the stuff in a bad way. Am trying to figure out how to delete this question after another version was added.

allan

Hi,

Could you add:

console.log( JSON.stringify( json ) );

at the end of your postSubmit and show me the resulting string please? Even better would be if you are able to give me a link to your page so I can debug it directly?

Thanks,
Allan

spickens

Thank you, Allen. Following is the code and the result from the console log. The console log doesn't seem to be correct, but I'm not sure how it gets that way.

        editor.on('postSubmit', function (e, json, data, action) {
            if (action === "create") {
                json.data = [JSON.parse(json.d)];
            }
            console.log(JSON.stringify(json));
        });

This is what the console log contains.

{"d":"{\"data\":{\"SALUTATION\":\"77777\",\"FIRSTNAME\":\"77777\",\"LASTNAME\":\"77777\",\"USERNAME\":\"77777\",\"ENABLED\":\"1\",\"ID\":\"9\"}}","data":[{"data":{"SALUTATION":"77777","FIRSTNAME":"77777","LASTNAME":"77777","USERNAME":"77777","ENABLED":"1","ID":"9"}}]}

allan

Ah - reformatted that shows the issue:

{
    "d": "{\"data\":{\"SALUTATION\":\"77777\",\"FIRSTNAME\":\"77777\",\"LASTNAME\":\"77777\",\"USERNAME\":\"77777\",\"ENABLED\":\"1\",\"ID\":\"9\"}}",
    "data": [{
        "data": {
            "SALUTATION": "77777",
            "FIRSTNAME": "77777",
            "LASTNAME": "77777",
            "USERNAME": "77777",
            "ENABLED": "1",
            "ID": "9"
        }
    }]
}

So use:

json.data = [JSON.parse(json.d).data];

Allan

spickens

Sorry. Still doesn't work after making the requested change. Below is the console output after the change.

{"d":"{\"data\":{\"SALUTATION\":\"9999\",\"FIRSTNAME\":\"99999\",\"LASTNAME\":\"99999\",\"USERNAME\":\"9999\",\"ENABLED\":\"1\",\"ID\":\"11\"}}","data":[{"SALUTATION":"9999","FIRSTNAME":"99999","LASTNAME":"99999","USERNAME":"9999","ENABLED":"1","ID":"11"}]}

kthorngren

Did you change your console.log to this?
console.log(JSON.parse(json.d).data);

Looks like the problem might be that the returned data isn't in an array. According to the Create data exchange docs the response should look like this:

{
    "data": [
        {
            "DT_RowId":   "row_29",
            "first_name": "Fiona",
            "last_name":  "Green",
            "position":   "Chief Operating Officer (COO)",
            "office":     "San Francisco",
            "extn":       "2947",
            "salary":     "850000",
            "start_date": "2010-03-11"
        }
    ]
}

But yours looks like this:

        "data": {
            "SALUTATION": "77777",
            "FIRSTNAME": "77777",
            "LASTNAME": "77777",
            "USERNAME": "77777",
            "ENABLED": "1",
            "ID": "9"
        }

However you do have:

    "data": [{
        "data": {
            "SALUTATION": "77777",
            "FIRSTNAME": "77777",
            "LASTNAME": "77777",
            "USERNAME": "77777",
            "ENABLED": "1",
            "ID": "9"
        }
    }]

Wonder if your server code is mistakenly encapsulating an extra data object.

Kevin

spickens

This is the exact string my server returns as captured at a break point immediately before the return....

{
"data": [{
"SALUTATION": "dddd",
"FIRSTNAME": "dddd",
"LASTNAME": "dddd",
"USERNAME": "dddd",
"ENABLED": "0",
"ID": "17"
}]
}

The following is the postSubmit function...

editor.on('postSubmit', function (e, json, data, action) {
if (action === "create") {
json.data = [JSON.parse(json.d).data];
}
console.log(JSON.parse(json.d).data);
});

This is the console log from the post-Submit function ..

{"d":"{\"data\":[{\"SALUTATION\":\"dddd\",\"FIRSTNAME\":\"dddd\",\"LASTNAME\":\"dddd\",\"USERNAME\":\"dddd\",\"ENABLED\":\"0\",\"ID\":\"17\"}]}","data":[[{"SALUTATION":"dddd","FIRSTNAME":"dddd","LASTNAME":"dddd","USERNAME":"dddd","ENABLED":"0","ID":"17"}]]}

The console log doesn't look correct to me, but you be the judge.

Also, the example shows a property like this.... "DT_RowId": "row_29", I don't return anything like that. I return ID and in the create: I set "IDSRC":"ID". Please advise. Also note that ID is not displayed in the datatable.

colin

Hi @spickens ,

Jumping in late here, this thread here may help, it's discussing those backslashes in .Net Core.

Cheers,

Colin