inline editing for add/edit +ajax

sarath_surisetty

Hello team

i had implemented DT-Editor for add/edit with ajax and working as expected, but when implemented inline edit,not making any Ajax call and when edited text and click outside the textbox, value reverting back to old value.

->how to make ajax call for inline edit?
ref : https://editor.datatables.net/examples/inline-editing/simple

thaks for the support

kthorngren

The ajax call is automatic. Maybe you don't have something setup correctly. Can you post your editor and datatables javascript code?

Kevin

sarath_surisetty

javascript code :

var xyzEditor;

// Call the dataTables jQuery plugin
$(document).ready(function() {


 xyzEditor = new $.fn.dataTable.Editor( {
     "ajax":{
         create: {
             type: 'POST',
             url:  '/xyz/add',
             contentType: 'application/json',
             data: function ( addData ) {
                 return JSON.stringify( addData.data[0] );
             },
              error: function (e) {

                 alert("ERROR: ", JSON.stringify(e));
             }
         },
         edit: {
             type: 'PUT',
             url:  '/xyz/update',
             contentType: 'application/json',
             data: function ( editData ) {
                 var idSelected;
                 $.each(editData.data,function(key,value){
                    idSelected=value.xyzId;
                 });
                return JSON.stringify(editData.data[idSelected] );
             },
              error: function (e) {

                 alert("ERROR: ", JSON.stringify(e));
             }
         },
         remove: {
             type: 'DELETE',
             url:  '/xyz/delete',
          // url:  '/xyz/delete/_id_',
             contentType: 'application/json',
             deleteBody: false,
             data: function ( editData ) {
                 var idSelected;
                 $.each(editData.data,function(key,value){
                    idSelected=value.xyzId;
                 });
                return JSON.stringify(editData.data[idSelected] );
             },
             success: function () {
                 alert('deleted');
             },
             error: function (e) {

                 alert("ERROR: ", JSON.stringify(e));
             }
         }
     },
     "table": "#agenyListDataTables",
     "idSrc":  'xyzId',
     "fields": [   {
             "label" : 'xyzId',
             "name" : 'xyzId',
             "type":  "readonly",
              "attr": {
                    "type": "number"
                  }
         },
         {
             "label" : 'xyzName',
             "name"  : 'xyzName',
             "attr": {
                "type": "text"
              }
         },
         {
             "label" : 'xyzDescription',
             "name"  : 'xyzDescription',
             "attr": {
                "type": "text"
              }
         },
         {
             "label": 'xyzPhone',
             "name"  : 'xyzPhone',
             "attr": {
                "type": "text"
              }
         },
     ]
 } );


 xyzEditor.on('initCreate', function() {
     xyzEditor.hide('xyzId');
    });


//Activate an inline edit on click of a table cell
 $('#agenyListDataTables').on( 'click', 'tbody td.editable', function (e) {
     xyzEditor.inline( this );
 } );

 //validation
 xyzEditor.on( 'preSubmit', function ( e, o, action ) {
     if ( action !== 'remove' ) {
         var xyzNameField = this.field( 'xyzName' );

         // Only validate user input values - different values indicate that
         // the end user has not entered a value
         if ( ! xyzNameField.isMultiValue() ) {
             if ( ! xyzNameField.val() ) {
                 xyzNameField.error( 'A xyz name must be given' );
             }

             if ( xyzNameField.val().length >= 20 ) {
                 xyzNameField.error( 'The xyz name length must be less that 20 characters' );
             }
         }

         // ... additional validation rules

         // If any error was reported, cancel the submission so it can be corrected
         if ( this.inError() ) {
             return false;
         }
     }
 } );



 var xyzTable= $('#agenyListDataTables').DataTable({
     dom: "Bfrtip",
     processing: true,
     serverSide: true,
     ajax: 'xyz/list',
     columns: [
         {
             data: 'xyzId',
             defaultContent: '',
             className: 'select-checkbox',
             orderable: false,
             "render": function(data, type, row) {
                 return "";
             }
         },
         {
             data: 'xyzId'
         },
         {
             data: 'xyzName',
             className: 'editable'
         },
         {
             data: 'xyzDescription',
             className: 'editable'
         },
         {
             data: 'xyzPhone',
             className: 'editable'
         }

     ],
     select: {
         style:    'os',
         selector: 'td:first-child'
     },
     buttons: [
         { extend: "create", editor: xyzEditor },
         { extend: "edit",   editor: xyzEditor },
         { extend: "remove", editor: xyzEditor }
     ]

 } );




});

colin

Hi @sarath_surisetty ,

Yep, that's the expected behaviour - by default, it won't submit if you click away. If you want to submit on a blur, you need to specify onBlur: 'submit' as in the example here.

Cheers,

Colin

sarath_surisetty

added the below line but no luck:

//Activate an inline edit on click of a table cell
$('#xyzListDataTables').on( 'click', 'tbody td.editable', function (e) {
xyzEditor.inline( this, {
onBlur: 'submit'
} );

not passing data to PUT as json object,would like to make ajax with json object for inline edit,since the select-edit is ajax/json

kthorngren

Maybe the data submitted is not included for your edit ajax function:

         edit: {
             type: 'PUT',
             url:  '/xyz/update',
             contentType: 'application/json',
             data: function ( editData ) {
                 var idSelected;
                 $.each(editData.data,function(key,value){
                    idSelected=value.xyzId;
                 });
                return JSON.stringify(editData.data[idSelected] );
             },
              error: function (e) {
 
                 alert("ERROR: ", JSON.stringify(e));
             }
         },

I would start byusing some debugs to see what editData contains when inline editing. Maybe you need to use the allifchanged option when submitting your inline edit:
https://editor.datatables.net/reference/type/form-options#submit---What-values-should-be-submitted-to-the-server

Kevin

sarath_surisetty

hi now able to PUT successfully with expected json but got the error when table refresh data showing continuously processing.

code :
$('#xyzListDataTables').on( 'click', 'tbody td.editable', function (e) {
xyzEditor.inline( this, {
onBlur: 'submit',
submit: 'allIfChanged'
} );
} );

error in firebugs is

! TypeError: node is undefined at dataTab....min.js (line 10, col 81924)

allan

That's not an error I'm familiar with. Can you link to a page showing the issue please? It would also be useful if you could show the JSON being returned from the server after the edit.

Thanks,
Allan

sarath_surisetty

hi allan

im running on the local host, but attached the screenshot of fire bug when edit inline called.

allan

Can you run the debugger on your table and give me the debug code please?

Allan

sarath_surisetty

hi looks like when i acquired license for solo and upgraded library but still same problem,
after editing table show processing

bug debugger can be found here : https://debug.datatables.net/ayusuz

sarath_surisetty

also have two more issues:

-> at the debug link given ,Table (#propertyListDataTables),add button works fine but edit button shows error
uncaught exception: Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

can u help in finding the issue?

-> and for select2 +ajax, what is the responce expected by the select2 for binding data and will the select2 will retain with data when edit is called?

sarath_surisetty

-> at the debug link given ,Table (#propertyListDataTables),add button works fine but edit button shows error
uncaught exception: Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

i resolved please ignore,

would like to fix,other two points:

1)for select2 +ajax, what is the responce expected by the select2 for binding data and will the select2 will retain with data when edit is called?

2)inline edit bug ! TypeError: node is undefined at dataTab....min.js (line 10, col 81924)

allan

bug debugger can be found here : https://debug.datatables.net/ayusuz

Unfortunately I don't see what is causing the problem there. Could you publish the page on the web somewhere so I can debug it directly please? PM me the URL by clicking my name above and then Send message if you like.

1)for select2 +ajax, what is the responce expected by the select2 for binding data and will the select2 will retain with data when edit is called?

The Select2 documentation for Ajax is available on the Select2 site.

Allan