ASPX.NET How to get table to update after CREATE

spickens

My software successfully creates a new user on the server via the Editor. It successfully sends the new user to my aspx.net c# webmethod. So good so far.

The webmethod returns a json string with the data sent. I want to update the table, adding the new user. From my reading, it seems like I have to do this in the postSubmit() event. Several questions:

1. The postSubmit() event has 4 parameters (e, json, data, action). It's my understanding that the json parameter contains the json string returned from my webmethod. Is this Correct?
2. What is the next step: Do I JSON.parse(json)? If so, where do I put the object?
3. What is in the data parameter?

allan

What is the JSON format that the server is currently responding with? What Editor expects is documented here.

Allan

spickens

Below is my postSubmit function.

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

Below are what Chrome displays for the content of the function's "json" parameter. The server returns a json string.

d: "{"data":{"SALUTATION":"Test6","FIRSTNAME":"test6","LASTNAME":"test6","USERNAME":"spcc6","ENABLED":"0","id":7}}"
proto: Object

Below is what Chrome displays for the content of the function's "data" parameter.

action: "create"
data:
0: {SALUTATION: "Test6", FIRSTNAME: "test6", LASTNAME: "test6", USERNAME: "spcc6", ENABLED: "0"}
proto: Object
proto: Object

My question is, do I need to do something with the "json" parameter in order to get the table to automatically update. The idsrc = 'id'. The majority of the client-side code is below.

    $(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",
                success: function (response) {
                    console.log(response);
                    return JSON.parse(response.d);
                }
            },
                fields: [{
                    label: "Salutation:",
                    name: "SALUTATION"
                }, {
                    label: "First Name:",
                    name: "FIRSTNAME"
                },
                {
                    label: "Last Name:",
                    name: "LASTNAME"
                }, {
                    label: "User Name:",
                    name: "USERNAME"
                }, {
                    label: "Enabled?:",
                    name: "ENABLED"
                }]
        });

        editor.on('preSubmit', function (e, o, action) {
            if (action !== 'remove') {
                var salutation = this.field('SALUTATION');
                var firstName = this.field('FIRSTNAME');
                var lastName = this.field('LASTNAME');
                var userName = this.field('USERNAME');
                var isEnabled = this.field('ENABLED');

                if (!salutation.isMultiValue()) {
                    ;       // No validation yet.
                }

                if (!firstName.isMultiValue()) {
                    if (!firstName.val()) {
                        firstName.error('You must enter a First Name.');
                    }

                    if (firstName.val().length >= 50) {
                        firstName.error('The maximum length of first name is 50 characters.');
                    }
                }

                if (!lastName.isMultiValue()) {
                    if (!lastName.val()) {
                        lastName.error('You must enter a Last Name.');
                    }

                    if (lastName.val().length >= 150) {
                        lastName.error('The maximum length of last name is 150 characters.');
                    }
                }

                if (!userName.isMultiValue()) {
                    if (!userName.val()) {
                        userName.error('You must enter a User Name.');
                    }

                    if (lastName.val().length >= 16) {
                        userName.error('The maximum length of first name is 16 characters.');
                    }
                }

                if (!isEnabled.isMultiValue()) {
                    if (!isEnabled.val()) {
                        isEnabled.error('You must enter a zero (disabled) or 1 (enabled).');
                    }

                    if (isEnabled.val().length > 1) {
                        isEnabled.error('The maximum length of this field is 1 character, 0 or 1.');
                    }

                    if (isEnabled.val() !== '0' && isEnabled.val() !== '1') {
                        isEnabled.error('The value is this field must be 0 or 1');
                    }

                    if (isEnabled.val().length > 1) {
                        isEnabled.error('The maximum length of this field is 1 character, 0 or 1.');
                    }
                }

                if (this.inError()) {
                    return false;
                }
            }
        });

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

        $.ajax({
            url: "UserList.aspx/LoadColumns",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            success: function (json) {
                var temp;
                temp = JSON.parse(json.d);
                columnsx = temp;

                $("#userListGrid").DataTable({
                    dom: 'Bfrtip',
                    select: true,
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print',            
                        { extend: "create", editor: editor }
                    ],
                    "processing": true,
                    "serverSide": false,
                    "pageLength": 25,
                    "paging": true,


                    "ajax": {
                        "url": "UserList.aspx/LoadData",
                        "type": "POST",
                        "datatype": "json",
                        "error": "ajaxError",
                        "contentType": "application/json",
                        "dataSrc": function (json) {
                            var temp;
                            temp = JSON.parse(json.d);
                            return temp;
                        }
                    },

                    "columns": columnsx
                });
            },
            error: function () {
                alert("Load Columns Failed");
            }
        });


     });

allan

// what now?

You need to modify the data returned from the server to match the form that Editor expects. That could be done with:

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

i.e. take the d string from the object and convert it to JSON and assign it into an array which is attached to json.data.

Allan