Integrating autocomplete to the field and multiple images upload .

sarath_surisetty

hello team

i had implemented editor+spring boot and please see the below code.
Both add and put works fine. but when i try remove,DELETE is apending the datatable object to the api so changed to post.
how to avoid dataobject to get appended to the DELETE url?

->i would like to achieve two functionalities.
i)to integrate Autocomplete to the field xyzName , have to configure the autocomplete with Ajax call to server (went through https://editor.datatables.net/plug-ins/field-type/editor.autoComplete but an example will be really helpful as got confused with how to create Object.
ii)to integrate the mulitiple file upload using the ajax(would like to have one to many relation from xyz object to images.eg:product to multiple images relation using ajax.

 xyzEditor = new $.fn.dataTable.Editor( {
     "ajax": "/xyz/update/",
     "ajax":{
         create: {
             type: 'POST',
             url:  '/xyz/add',
             contentType: 'application/json',
             data: function ( addData ) {
                /*  
                var xyzObj = {
                        xyzId : 0,//d.data[0]["xyzId"],
                        xyzName : addData.data[0]["xyzName"],
                        xyzPhone :addData.data[0]["xyzPhone"],
                        xyzDescription :addData.data[0]["xyzDescription"]
                    }*/
                 addData.data[0]["xyzId"]=0;
                 return JSON.stringify( addData.data[0] );
             },
             success: function () {
                 console.log('inserted');
             }
         },
         edit: {
             type: 'PUT',
             url:  '/xyz/add',
             contentType: 'application/json',
             data: function ( editData ) {
                 var idSelected;
                 $.each(editData.data,function(key,value){
                    idSelected=value.xyzId;
                 });
                return JSON.stringify(editData.data[idSelected] );
             },
             success: function () {
                 console.log('edited');
             }
         },
         remove: {
             type: 'POST',
             url:  '/xyz/delete',
             contentType: 'application/json',
             data: function ( editData ) {
                 var idSelected;
                 $.each(editData.data,function(key,value){
                    idSelected=value.xyzId;
                 });
                return JSON.stringify(editData.data[idSelected] );
             },
             success: function () {
                 alert('deleted');
             }
         }
     },
     "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"
              }
         },
     ]
 } );

thanks for the support

allan

how to avoid dataobject to get appended to the DELETE url?

Use the ajax.deleteBody option.

i)to integrate Autocomplete to the field xyzName

Do you already have jQuery UI on your page or can you use another library such as Select2. Personally I find the jQuery UI AutoComplete library really difficult to work with. But that might just be me!

ii)to integrate the mulitiple file upload using the ajax

This example shows how the uploadMany input type can be used.

Allan

sarath_surisetty

hi allan
thanks for the quick reply.
trying to find and example for select2 implementation with ajax.
{
"label" : 'xyzName',
"name" : 'xyzName',
"attr": {
"type": "select2"
}
}

for the above code it will be helpful to get example to implement select2..

thanks

allan

The Select2 documentation has an example of how to use Select2 with Ajax.

Pass Select2 options into the opts object in your field's definition.

Allan