Different Create, Edit, Delete Error and Success Functions

bvelasquez

I am trying to follow the instruction on page:

https://editor.datatables.net/reference/option/ajax
along with
http://api.jquery.com/jQuery.ajax/

But I can't seem to get my success or error functions to trigger.

Here is what I have:

    datatables_editor = new $.fn.dataTable.Editor({
        table: "#myTable", // define first to use in the methods?
        fields: [
            { label: 'UserID', name: 'UserID', def: currentUsername, type: 'hidden' }, // This will be a hidden field
            { label: 'Work Date', name: 'WorkDateKey', type: 'datetime', def: function() {
                    return new Date(); }, format: 'dddd D MMMM YYYY' },
            { label: 'Clock-In', name: 'ClockIn', type: 'datetime', format: 'h:mm A', opts: { minutesIncrement: 15 }, def: '9:00 AM' },
            { label: 'Clock-Out', name: 'ClockOut', type: 'datetime', format: 'h:mm A', opts: { minutesIncrement: 15 }, def: '5:00 PM' },
            { label: 'Lunch Break', name: 'Lunchbreak', /*fieldInfo: 'Enter in decimal format (0.5 is 30 mins)',*/ def: '0.5' },
            { label: 'Hours', name: 'Hours', type: 'readonly' },
            { label: 'Comments', name: 'Comments' } //,
        ],
        idSrc: "SeqNumForFrontEnd",
        ajax: {
            // dataType: "json", 
            // contentType: "application/json", 
            create: {
                "type": "POST",
                "url": devServerRelativeURL + "api/TimesheetClocks/",
                "dataType": "json",
                "contentType": "application/json",
                "data": function(d) {
                        console.log("data from datatables_editor: ");
                        console.log(d);
                        // strip json before sending to server
                        cleanJsonObject = d.data[0]; // this will always be 0 until assigned server side
                        console.log("stripped data: ");
                        console.log(cleanJsonObject);

                        // process hours and add to json object

                        stringifiedJsonObject = JSON.stringify(cleanJsonObject);
                        console.log("stringified object: ");
                        console.log(stringifiedJsonObject);
                        return stringifiedJsonObject;
                },
                ```success: function() {
                    alert("success!!!");
                },
                error: function (xhr, error, thrown) {
                   alert( xhr, error, thrown );
                }```
            },
            edit: {
                "type": "PUT",
                "url": devServerRelativeURL + "api/TimesheetClocks/_id_",
                /* _id_ - Will be replaced by the row id that is being edited or removed (as defined by idSrcOption).  */
                "dataType": "json",
                "contentType": "application/json",
                "data": function(d) {
                        console.log("currentlySelectedId: ");
                        console.log(currentlySelectedId);

                        console.log("data from datatables_editor: ");
                        console.log(d);
                        // cleanJsonObject = d.data.SeqNumForFrontEnd;
                        cleanJsonObject = d.data;
                        console.log("data we want to pass: ");
                        console.log(cleanJsonObject);
                        var sendJson = cleanJsonObject[currentlySelectedId];
                        sendJson.SeqNumForFrontEnd = currentlySelectedId;
                        stringifiedJsonObject = JSON.stringify(sendJson);
                        console.log("stringified object: ");
                        console.log(stringifiedJsonObject);
                        return stringifiedJsonObject;
                    } //,
            },
            remove: {
                "type": "DELETE",
                // _id_ - Will be replaced by the row id that is being edited or removed (as defined by idSrcOption). 
                "url": devServerRelativeURL + "api/TimesheetClocks/_id_",
                "dataType": "json",
                "contentType": "application/json",
                "data": function(d) {
                    var blank = "";
                    return blank;
                }
            }
        }
    });

I am putting the success and error function handlers inside the create method. Is this correct?
Can someone give me an example of having different success/error handlers for each method?

allan

With Editor 1.6 that looks like it should work okay.

However, rather than using the success and error callbacks, I would suggest that you listen for postSubmit or other suitable events.

What exactly do you want to do with the callbacks?

Allan

bvelasquez

Doesn't seem to listen at all to those flags. No error. But just ignores it.

I want to handle http status codes, most important a 409 status code which indicates a conflict (a record with the same key already exists).

allan

Could you show me how you are adding the event listener please?

Thanks,
Allan

bvelasquez

Using statusCode worked for me.

            ajax: {
                create: {
                    "type": "POST",
                    "url": devServerRelativeURL + "TimesheetClocks/",
                    "dataType": "json",
                    "contentType": "application/json",
                    statusCode: {
                        404: function() {
                            alert("Page not found!!");
                        },
                        409: function() {
                            alert("Conflict!");
                        }
                    },

Now, what I want to do is to display the error on the form footer. Since it's not associated with a particular field, I try to use nameofeditor.error() in an inline function in the statusCode handler but nothing seems to come up.

https://editor.datatables.net/reference/api/error()

For example:

                    statusCode: {
                        404: function() {
                            datatables_editor.error("Whole form error");
                        },

I tried some jQuery hacking to clear the error div, set the error status and display the div, but it fades away automatically not sure why exactly.

Any ideas why the error doesn't show up in the footer or why it fades out automatically?

allan

Yes - the statusCode runs first, then Editor's own callback. If it doesn't find an error property it will call error() itself to say that there is no error! Hence why it is immediately fading out.

You could add a small setTimeout() into your 404 callback. That would allow it to execute after Editor's own handler.

Allan

bvelasquez

That works!
Thank you Allan