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

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}]}

allan

Can you link to a page showing the issue so I can help to debug it please.

Thanks,
Allan

klermann

Unfortunately I'm working locally.

klermann

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!

klermann

Where is the ID sent to delete and edit?

klermann

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] ); } )

allan

Is there any method for me to give a reload in the #panels element to update the items?

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.

Where is the ID sent to delete and edit?

The client / server data interchange documents this.

Allan

klermann

Hi Allan, I got it resolved here!