Edit OneToMan Ajax:
Edit OneToMan Ajax:
sarath_surisetty
Posts: 54Questions: 13Answers: 0
with reference to the example :https://editor.datatables.net/examples/advanced/joinArray.html
i had implemented one to many join,but since serverside code is in spring boot, i have implemented with ajax.
->Biggest challenge is i have used select2 and when i click edit, text fields getting populated with the selected row corresponding value but the select2 and other components like the checkbox are not by getting selected by default value.
(select2 is many relation and making ajax call to populate the suggestion dropdown)
->so when i manually again populate select2 and then invoke put, the object of many relation associated with the select2 is posting the object.value2 (but the object has (value1,value2,value3) . how to post the object like that when i edit?
code is :
var xyzEditor;
$(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] );
}
},
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] );
}
},
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');
}
}
},
"table": "#xyzListDataTables",
"idSrc": 'xyzId',
"fields": [ {
"label" : 'xyzId',
"name" : 'xyzId',
"type": "readonly",
"attr": {
"type": "number"
}
},
{
type: 'select',
label: 'xyzFacing',
name: 'xyzFacing',
multiple: true,
separator: ',',
options: [
{ label: 'EAST', value: "EAST" },
{ label: 'WEST', value: "WEST" },
{ label: 'NORTH', value: "NORTH" },
{ label: 'SOUTH', value: "SOUTH" }
]
},
{
"label" : 'xyzRoadWidthFeet',
"name" : 'xyzRoadWidthFeet',
"attr": {
"type": "number",
"step":"any"
}
},
{
"label": "xyzArea",
"name": "xyzArea.xyzAreaName",
"type": "select2",
"data": "xyzArea.xyzAreaName",
"opts": {
"minimumInputLength": 3,
"placeholder": 'xyz Area',
"allowClear": true,
ajax: {
url: 'xyzArea/json',
delay: 250 ,
data: function (params) {
var query = {
xyzAreaName: params.term
}
return query;
},
processResults: function (data) {
return {
results: $.map(data, function(obj) {
return { id: obj.xyzAreaId, text: obj.xyzAreaName };
})
};
}
}
}
},
/*{
label: "Images:",
name: "files[].id",
type: "uploadMany",
ajax: 'image/add',
display: function ( fileId, counter ) {
return '<img src="'+editor.file( 'files', fileId ).web_path+'"/>';
},
noFileText: 'No images'
},*/
{
type: "checkbox",
label: "active",
name: "active",
options: {
"Active": "Active",
"InActive":"InActive"
},
separator: ','
}
]
} );
xyzEditor.on('initCreate', function() {
xyzEditor.hide('xyzId');
});
//validation
xyzEditor.on( 'preSubmit', function ( e, o, action ) {
if ( action !== 'remove' ) {
var xyzFacingField = this.field( 'xyzFacing' );
// Only validate user input values - different values indicate that
// the end user has not entered a value
if ( ! xyzFacingField.isMultiValue() ) {
if ( ! xyzFacingField.val() ) {
xyzFacingField.error( 'A xyzFacingField must be given' );
}
if ( xyzFacingField.val().length >= 20 ) {
xyzFacingField.error( 'The xyzFacingField 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= $('#xyzListDataTables').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: 'xyzRoadWidthFeet'
},
{
data: 'xyzArea.xyzAreaName'
},
{
data: 'active'
},
{
data: "xyzImages",
render: function ( d ) {
return d.length ?
d.length+' image(s)' :
'No image';
},
title: "Image"
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: xyzEditor },
{ extend: "edit", editor: xyzEditor },
{ extend: "remove", editor: xyzEditor }
]
} );
});
This discussion has been closed.
Replies
Hi,
Are you able to give me a link to the page so I can check it out? When Select2 is populated on edit, it should trigger an Ajax call with an
initialValueparameter set and a list of the values which are selected. Is it doing that?Thanks,
Allan
Hi Allan
Tried initialValue but no luck.
Could u give any reference link as I'm not able to share link since it is in localhost.
Or in the below code if u help where to keep initiaValue options will do much appreciated.and to populate initial value should I get the value when row selected ?
{
The
initialValueparameter should be sent to thexyzArea/jsonURL when editing is started on a row. Is that not happening for you?Thanks,
Allan
hi allan yes i can see the below ajax call
http://localhost:8080/xyzArea/json?initialValue=true&value=%22Irl%22"
i understand that i have to write an endpoint for this call. but what should i rerturn, it should be a string to show as value or any standard format is required.
thanks
sarath
hi allan
i tried returning both the string and object for the ajax call but no luck, its not updating the select2 when edit clicked,how to update the value of select2 when edit clicked.
thanks
sarath
also i tried returning {"id":1,"text":"Irlapadu"} but still no updation to the select
ha
at last i found where is the problem ,intial value should be in opts but i added in ajax.
"opts": {
"minimumInputLength": 3,
"placeholder": 'Property Area',
"allowClear": true,
"initialValue":true,
Ah! That would do it. Thanks for posting back :-).
Allan