To send and to edit an item in the collection and when I try to save an item the item with the di 1
To send and to edit an item in the collection and when I try to save an item the item with the di 1
klermann
Posts: 277Questions: 67Answers: 1
Hello Allan I'm using Standalone collection editor and I'm not able to send the ID by the sample code I posted below, to send and to edit an item in the collection and when I try to save an item the item with ID 1 is duplicated. Can you help me please?
`var editor; // use a global for the submit and return data rendering in the examples
// Template function to display the information panels. Editor will
// automatically keep the values up-to-date with any changes due to the use of
// the `data-editor-field` attribute. It knows which panel to update for each
// record through the use of `data-editor-id` in the container element.
function createPanel ( data )
{
var id = data.DT_RowId;
$(
'<div class="col-2"><div class="painel" data-editor-id="' + id + '">'+
'<i class="edit fa fa-pencil" data-id="' + id + '"/>'+
'<i class="remove fa fa-times" data-id="' + id + '"/>'+
'<dl>'+
'<dt>ID:</dt>'+
'<dd>'+
'<span data-editor-field="first_name"> ' + data.id + '</span> '+
'</dd>'+
'<dt>Nome: </dt>'+
'<dd data-editor-field="position"><span></span> ' + data.nome + '</dd>'+
'<dt></dt>'+
'<dd data-editor-field="office"><span class="rigth font-size-12">Ação: </span></dd>'+
'</dl>'+
'</div></div>'
).appendTo( '#paineis' );
}
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "listJson",
fields: [ {
name: "nome",
attr :{ placeholder: "Insira nome da etiqueta"}
}
]
} );
// Create record - on create we insert a new panel
editor.on( 'postCreate', function (e, json) {
createPanel( json.data[0] );
} );
$('button.create').on( 'click', function () {
editor
.title('<h3 class="pl-20 pb-10">Criar nova Etiqueta</h3>')
.buttons('Criar')
.create();
} );
// Edit
$('#paineis').on( 'click', 'i.edit', function () {
editor
.title('<h3 class="pl-20 pb-10">Editar Etiqueta</h3>')
.buttons('Salvar')
.edit( $(this).data('id') );
} );
// Remove
$('#paineis').on( 'click', 'i.remove', function () {
editor
.title('<h3 class="pl-20 pb-10">Apagar Etiqueta</h3>')
.buttons('Apagar')
.message('<div class="alert alert-danger alert-dismissible" role="alert">' +
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
'<span aria-hidden="true">×</span></button>' +
'Tem certeza que deseja remover essa Etiqueta?</div>')
.remove( $(this).data('id') );
} );
// Load the initial data and display in panels
$.ajax( {
url: 'listJson',
dataType: 'json',
success: function ( json ) {
for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
createPanel( json.data[i] );
}
console.log("=================" +ien);
}
} );
} );
</script>`
{"draw":14,"recordsTotal":14,"recordsFiltered":14,"data":[{"id":1,"nome":"Etiqueta 1","minhasReceitas":null},{"id":2,"nome":"Etiqueta 2","minhasReceitas":null},{"id":3,"nome":"Etiqueta 3","minhasReceitas":null},{"id":4,"nome":"Etiqueta 4","minhasReceitas":null},{"id":5,"nome":"Etiqueta 5","minhasReceitas":null},{"id":6,"nome":"Etiqueta 6","minhasReceitas":null},{"id":7,"nome":"Etiqueta 7","minhasReceitas":null},{"id":8,"nome":"Etiqueta 8","minhasReceitas":null},{"id":9,"nome":"Etiqueta 9","minhasReceitas":null},{"id":10,"nome":"Etiqueta 10","minhasReceitas":null},{"id":13,"nome":"Etiqueta 13","minhasReceitas":null},{"id":14,"nome":"fdaasdasd","minhasReceitas":null},{"id":15,"nome":"sdasdasdasd","minhasReceitas":null},{"id":16,"nome":"SDSADasdasdas","minhasReceitas":null}]}
This question has an accepted answers - jump to answer
Answers
Can you link to a page showing the issue so I can help to debug it please.
Thanks,
Allan
Unfortunately I'm working locally.
Is there any method for me to give a reload in the #panels element to update the items? As with the datatable: oTable.ajax.reload ()? I would solve my problem, this would be a solution because when I update the page the item is updated!
Where is the ID sent to delete and edit?
When creating a new item the editor.on () method is sending an item as if it were the first one ...because in the array the value [0]
editor.on( 'postCreate', function (e, json, index, i) {createPanel( json.data[0] );} )You'd need to refer to the documentation that you are using for your panels element. If it isn't a DataTable, then its out of the scope of DataTables.
The client / server data interchange documents this.
Allan
Hi Allan, I got it resolved here!