inline editing for add/edit +ajax

inline editing for add/edit +ajax

sarath_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
edited May 2018 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • sarath_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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 }
         ]
    
     } );
    
    
    
    
    });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited May 2018

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
    edited May 2018

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
    edited May 2018

    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)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    hi allan

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • sarath_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
    edited May 2018

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    -> 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)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.