How do you continue inline editing after receiving bad JSON data from Ajax post?

J Brown

I am fairly new to the DataTables Editor, so forgive me if that has been answered elsewhere. In my table, I want to inline edit some of the columns in my table. After the data is saved via an Ajax post, I want to display either a Success or Error dialog. I tried implementing this as the "successCallback" and "errorCallback" below that I borrowed from another user's post. Because I have not fully implemented the server side processing, I am seeing the "errorCallback" function called as expected, and my custom dialog displays the error correctly. However, once the dialog is dismissed, I can no longer inline edit. I can see that it is hitting the function that launches the editor.inline(...) again, but does not display anything.

I suspect there is some clean up or reset that needs to be done to the editor before I can inline edit again. I tried editor.close() a few places, but that seems to have no effect.

Is there an example of handling bad JSON returned from an inline editor Ajax post and what that syntax should look like in order to continue editing?

Thanks in advance,
--John

 editor = new $.fn.dataTable.Editor( {
                table: '#table',
                fields: editable_columns,
                idSrc: "mac_id",
                ajax: function (method, url, data, successCallback, errorCallback) {
                    $.ajax({
                        url: "/_inventory_assets/",
                        datatype: "json",
                        contentType: "application/json; charset=utf-8",
                        headers: {
                            "X-CSRFToken": _xsrf
                        },
                        "data": function (data) {
                            data.table_id = table_id;
                            var json = JSON.stringify(data);
                            return json;
                        },
                        success: function (result) {
                            console.warn("success callback result=" + JSON.stringify(result));
                            DisplayAjaxResultsInDialog(result, "Update Data")
                        },
                        error: function (xhr) {
                            console.warn("error callback xhr=" + JSON.stringify(xhr));
                            if (xhr)
                                if (xhr["responseText"])
                                    DisplayAjaxResultsInDialog(xhr["responseText"], "Update Data");
                            //editor.close();
                        }
                    })
                },
                formOptions: {
                    main: {
                        submit: 'changed',
                    }
                },
            } );

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

allan

You need to call one of successCallback / errorCallback in order to tell Editor that the submit has completed (either in success or in error).

Just adding errorCallback(); where you currently have the editor.close() commented out should do it.

Allan

J Brown

Thanks for the quick response---that fixed my problem. I posted the working code below.

editor = new $.fn.dataTable.Editor( {
               table: '#table',
               fields: editable_columns,
               idSrc: "mac_id",
               ajax: function (method, url, data, successCallback, errorCallback) {
                   $.ajax({
                       url: "/_inventory_assets/",
                       datatype: "json",
                       contentType: "application/json; charset=utf-8",
                       headers: {
                           "X-CSRFToken": _xsrf
                       },
                       "data": function (data) {
                           data.table_id = table_id;
                           var json = JSON.stringify(data);
                           return json;
                       },
                       success: function (result) {
                           console.warn("success callback result=" + JSON.stringify(result));
                           DisplayAjaxResultsInDialog(result, "Update Data");
                           successCallback(result);
                       },
                       error: function (xhr, error, thrown) {
                           console.warn("error callback xhr=" + JSON.stringify(xhr));
                           if (xhr)
                               if (xhr["responseText"])
                                   DisplayAjaxResultsInDialog(xhr["responseText"], "Update Data");
                           errorCallback(xhr, error, thrown)
                       }
                   })
               },
               formOptions: {
                   main: {
                       submit: 'changed',
                   }
               },
           } );