event fired after ajax error is executed

javabrsun

Guys,

After I receive a server error and the ajax error function is executed I get
Uncaught TypeError: Cannot read property 'length' of undefined
at Editor._submitSuccess (datatables.js:24255)
at datatables.js:24146
at Object.opts.complete (datatables.js:23031)
at fire (jquery.js:3232)
at Object.fireWith (jquery.js:3362)
at done (jquery.js:9855)
at XMLHttpRequest.callback (jquery.js:10311)

It seems like something in my code is firing that extra event that causes the error.

Am I missing calling something on my ajax: error {} to avoid further propagation of event? What Am I missing?

This is my editor and datatable configurations. As you can see it is a simple CRUD of users:

    $(function () {
        var datatableUserAction = {
            dataType: "json",
            type: "POST",
            title: "User Entry",
            url: config.restapi.url + "/users/_id_",
            data: function (d) {
                d.newData = {};
                for (var key in d.data) {
                    if (!d.data.hasOwnProperty(key)) {
                        continue;
                    }
                    d.newData = d.data[key];
                }
                d.newData.roles = [ d.newData["role"] ]
                var dataString = JSON.stringify(d.newData);
                return dataString;
            },
            idSrc: '_id',
            dataFilter: function (data) {
                return data;
            },
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization",
                    "Basic " + btoa(localStorage.getItem("review_user_id") + ":" + localStorage.getItem("review_user_pwd")));
            },
            error: function (xhr, error, thrown) {
                var output = '<div class="alert alert-danger alert-dismissible" role="alert"><button class="close" data-dismiss="alert" type="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><strong>Error:&nbsp;&nbsp;</strong>Ops! '+xhr.responseJSON.errors[0].message+' </div><div class="alert-overlay"></div>';
                $('.alerts').hide().html(output).slideDown();
            },
            contentType: "application/json"
        };

        $('a[href="#anch-users"]').click(function (clickEvent) {
            userEditor = new $.fn.dataTable.Editor({
                ajax: {
                    create: $.extend(true, {}, datatableUserAction, {
                        url: config.restapi.url + "/users",
                        type: "POST"
                    }),
                    edit: $.extend(true, {}, datatableUserAction, {
                        type: "PATCH"
                    }),
                    remove: $.extend(true, {}, {
                        type: "DELETE",
                        dataType: "json",
                        url: config.restapi.url + "/users/_id_",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Authorization",
                                "Basic " + btoa(localStorage.getItem("review_user_id") + ":" + localStorage.getItem("review_user_pwd")));
                        },
                        dataFilter: function (data) {
                            return data;
                        },
                        data: function (d) {
                            return "{}";
                        }

                    }),
                },
                table: '#users-table',
                idSrc: '_id',
                fields: [
                    {
                        label: "Full Name:",
                        name: "fullName"
                    },
                    {
                        label: "eMail:",
                        name: "email"
                    },
                    {
                        label: "Phone:",
                        name: "phone"
                    },
                    {
                        label: "Role:",
                        name: "role",
                        def: "Read",
                        type: "select2",
                        options: [
                            {"label": "Administrator", "value": "Admin"},
                            {"label": "Read & Write", "value": "Write"},
                            {"label": "Read Only", "value": "Read"}
                        ]
                    }
                ]
            });
            userEditor.on('preSubmit', function (e, o, action) {
                if (action != 'remove') {
                    var role = userEditor.field('role');
                    var fullName = userEditor.field('fullName');
                    var email = userEditor.field('email');
                    if (!fullName.val()) {
                        fullName.error('Mandatory field');
                    }
                    if (!email.val()) {
                        email.error('Mandatory field');
                    }
                    if (!role.val()) {
                        role.error('You need to choose a Role');
                    }
                    if (this.inError()) {
                        return false;
                    }
                }
            });
            if (!$.fn.DataTable.isDataTable('#users-table')) {
                $('#users-table').DataTable({
                    ajax: {
                        url: config.restapi.url + '/users',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Authorization",
                                "Basic " + btoa(localStorage.getItem("review_user_id") + ":" + localStorage.getItem("review_user_pwd")));
                        }
                    },
                    dom: "Bfrtip",
                    columns: [
                        {data: "fullName"},
                        {data: "email"},
                        {data: "phone"},
                        {data: "role"}
                    ],
                    select: 'single',
                    buttons: [
                        {extend: "create", editor: userEditor},
                        {extend: "edit", editor: userEditor},
                        {extend: "remove", editor: userEditor}
                    ]
                });
            } else {
                //$('#users-table').DataTable().ajax.reload();
            }
        });

    });
// End of USERS databatable config

Any help is welcome!

allan

Could you show me the line of code at line 24255 please? It will vary by build and version.

Thanks,
Allan

javabrsun

The _submitSuccess callback function is being triggered after the ajax:error. I think that is my problem. If I only knew how to prevent it to happen!

The line 24255 is the for in for ( var i=0 ; i<json.data.length ; i++ )

after the error, somehow, my json has no .data

        if ( action === "create"  || action === "edit" ) {
            for ( var i=0 ; i<json.data.length ; i++ ) {  //error here
                setData = json.data[ i ];
                this._event( 'setData', [json, setData, action] ); // legacy

                if ( action === "create" ) {
                    // New row was created to add it to the DT
                    this._event( 'preCreate', [json, setData] );
                    this._dataSource( 'create', fields, setData, store );
                    this._event( ['create', 'postCreate'], [json, setData] );
                }
                else if ( action === "edit" ) {
                    // Row was updated, so tell the DT
                    this._event( 'preEdit', [json, setData] );
                    this._dataSource( 'edit', modifier, fields, setData, store );
                    this._event( ['edit', 'postEdit'], [json, setData] );
                }
            }
        }

allan

Ah! I know what it happening. Editor listens for jQuery's complete callback, rather than success (with is either / or with error, while complete is always triggered after whichever of those two fire).

It looks like you are using Editor 1.6.0. Could you update to 1.6.1 - there was a check added in 1.6.1 to make sure that json.data exists before it is used.

Allan

javabrsun

Yeap! Worked! Thank you!!!!

Although in the new version of Editor my modals are always aligned to the bottom of the window. Is that expected? How I can change that?

allan

No that isn't expected and it doesn't appear to happen here. My guess is some kind of CSS conflict, but I would need to be able to inspect the page to understand what is causing it.

Allan