Delay issue on event

marcpirat

hi

i have an datatable.

On every row i have a button to delete. When i click on the row i would like to display the record.

So i have two operation to do for the click.

when document is ready, i do

                var urlI18n = '/i18n/' + '[(${#authentication.getPrincipal().getLang()})]' + '.json';
                    var url = "/samplings";
                    
                    var samplingsTable = $('#samplingsTable').DataTable({
                        language: {
                            url :  urlI18n
                        },
                        bLengthChange: false, //hide 'show entries dropdown
                        processing: true,
                        serverSide: true,
                        pagingType: 'simple_numbers',
                        dom: 'Bfrtip',
                        buttons: [
                            {
                                text: '[(#{sampling.new})]', //should come from thymeleaf
                                action: function (e, dt, node, config) {
                                    $("#samplingsFragment").load("/template/new/samplings");
                                },
                                 init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                    $(node).addClass('btn-primary');
                                }
                            }
                        ],
                        initComplete: function() {
                            var $searchInput = $('div.dataTables_filter input');

                            $searchInput.unbind();

                            $searchInput.bind('keyup', function(e) {
                                if(this.value.length > 2) {
                                    samplingsTable.search( this.value ).draw();
                                }
                            });
   
                            
                        },
                        ajax: {
                            type: 'get',
                            url: url,
                            data: function (d) {
                                var current = $('#samplingsTable').DataTable();
                                d.page = (current != undefined) ? current.page.info().page : 0;
                                d.size = (current != undefined) ? current.page.info().length : 5;
                                d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
                                d.search=d.search.value;
                            }
                        },
                        columns: [
                            {data: 'compositeId'}, 
                            {data: 'buildDate'},
                            {data: 'productTypesName'},
                            {data: 'productsName'},
                            {data: 'machineName'},
                            {data: null, orderable: false, defaultContent: ' <i class="fas fa-trash-alt delete"></i>'}
                        ],
                        createdRow: function( row, data, dataIndex ) {
                           
                            $( row ).find('td:eq(0)').attr('data-id', data.id);
                            $( row ).find('td:eq(1)').attr('data-year', data.year);
                        }
                    });
                    
                    $("#samplingsTable tbody tr td:not('.delete')").on('click', function (e) {
                    
                        e.preventDefault();
                    
                        console.log("not delete operation");
                        var data = samplingsTable.row(this).data();

                        var id = data.id;
                        var year = data.year;

                        var url = '/template/edit/samplings/year/' + year + '/id/'+id;
                        $("#samplingsFragment").load(url);

                    });
                    
                    $("#samplingsTable").on('click', '.delete', function(e) {
                        e.preventDefault();
                        
                        var samplingsId=$(this).parents('tr').find('td:eq(0)').attr('data-id');
                        var samplingsYear=$(this).parents('tr').find('td:eq(1)').attr('data-year');
                        var id=samplingsYear+""+samplingsId;
                        var row =  $(this).parents('tr');
 
                        var url = "/samplings";
                     
                        bootbox.confirm({
                            title: /*[[#{delete}]]*/,
                            message: /*[[#{delete.entity}]]*/,
                            buttons: {
                                cancel: {
                                    label: '<i class="fa fa-times"></i> ' + [[#{no}]]
                                },
                                confirm: {
                                    label: '<i class="fa fa-check"></i> ' +  [[#{yes}]]
                                }
                            },
                            callback: function (result) {

                                if(result){
                                    deleteEntity(url, id); 
                                }
                            }
                        });
  
                    });

Actually they seem to have a delay issue.

Click on delete is working but not the other one... =>tbody tr td:not('.delete')

in debug when i do a copy paste in cosole it working...

colin

Hi @marcpirat ,

I'm not too clear what the problem is. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin