Table does not update on "Create"

kooliebwoy

Edit works perfectly. Updates automatically. I can also see the JSON response for when editing. Create also works, problem is I have to refresh the page to see the new row that was added. Yes I am displaying a primary key row that is auto increment in the back end. I am not allow them to enter value for that. I hide the field when the create form comes up. What am I doing wrong for the page not be refreshing?

Thanks.

kthorngren

Does the create response look similar to this?
https://editor.datatables.net/manual/server#Create

If it looks correct then a link to your code from troubleshooting would be best.

Kevin

kooliebwoy

Below is the code that I use to display the data from the table and update the data using Editor. It works perfectly except for when creating a new one. It creates the new one but it doesn't refreshes the table and show automatically. You have to refresh the entire page to do that. Sorry am just getting back to this.

Model.php

$editor = Editor::inst($db, 'table-name' , 'id')
            ->fields(
                Field::inst( 'id' ),
                Field::inst( 'column-name' )
                    ->validator( 'Validate::notEmpty' )
                    ->validator( 'Validate::unique' ),
                Field::inst( 'column-name' )
                    ->validator( 'Validate::notEmpty' ),
                Field::inst( 'is_active' )
                    ->validator( 'Validate::notEmpty' )
                    ->validator( 'Validate::numeric' ),
                Field::inst( 'created_at' )
                    ->validator( 'Validate::notEmpty' )
                    ->validator( 'Validate::dateFormat', array(
                        "format"  => "Y-m-d",
                        "message" => "Please enter a date in the format yyyy-mm-dd"
                    ) )
            )
            ->process( $_POST )
            ->json();

view.php

$(function(){

            var editor;

            editor = new $.fn.dataTable.Editor( {
                ajax:  '/get-data',
                table: '#view-table',
                fields: [
                    { label: 'Entry ID', name: 'id' },
                    { label: 'column-name',  name: 'column-name'  },
                    { label: 'column-name', name: 'column-name'},
                    {
                        type: "select",
                        label: 'Status',
                        name: 'is_active',
                        options: [
                            { label: 'Active', value: "1" },
                            { label: 'Inactive', value: "0" }
                        ]
                    },
                    { label: 'Date Entered',
                        name:  'created_at' ,
                        type:  'datetime',
                        def:   function () { return new Date();}
                    }
                ]
            });

            //hide the id field becauase we don't want them to enter anything in this
            editor.field( 'id' ).hide();

            var filename = 'file-name';
            var table = $('#view-table').DataTable( {
                ajax: '/get-data',
                dom: 'Bfrtip',
                language: {
                    "decimal": ".",
                    "thousands": ","
                },
                columns: [
                    { data: 'id'},
                    { data: 'column-name'},
                    { data: 'column-name'},
                    {
                        "class": "center",
                        "data": "is_active",
                        "render": function (val, type, row) {
                            return val == 0 ? "Inactive" : "Active";
                        }
                    },
                    { data: 'created_at'}
                ],
                select: true,
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit',   editor: editor },
                    {
                        extend: 'collection',
                        text: 'Export',
                        buttons:[
                            'copy',
                            { extend: 'pdf', filename: '*', title: filename},
                            { extend: 'excel', filename: '*', title: filename},
                            { extend: 'csv', filename: '*', title: filename},
                            'print'
                        ]
                    }
                ]
            } );
        });

allan

Is id an auto incrementing column in the database?

What is the JSON that is being returned by the server when the create request is sent? It would be useful to also see the parameters that are being sent.

I don't immediately see anything wrong with the code above I'm afraid.

Allan

kooliebwoy

Hi Allan,

Yes the "id" field is auto increment in the database. That is why I hide it from the editable form so a value cannot be entered.

On create this is what it returns. Screenshot attached.

Code used to get back the response

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

allan

That is why I hide it from the editable form so a value cannot be entered.

I missed the field().hide() call - sorry. I would suggest that you just don't include that fields in Editor at all!

Thanks for the screenshots. The reason the row isn't appearing on the client-side is that the server isn't returning it. The information about the row should be in the data array - but your screenshots show that to be empty.

Try removing

Field::inst( 'id' ),

and

{ label: 'Entry ID', name: 'id' },

Allan

kooliebwoy

I guess I will just have to do that. Without the id field it works just perfectly. Sucks that you can't use that. That would be a great feature. Thanks for the help @Allan.

allan

Do you just want to display the id in your DataTable? If so add:

Field::inst( 'id' )->set( false ),

into your PHP, and just don't include it in the Editor fields array.

Allan