Hi there,
in my table are buttons in the last columm, made with render: and createdcell: the function calls a ajax request.
Button clicks calls the the function, but the ajax request ist called for every previous call.
I found some solutions with .off() or unbind() but nothing seems to work, or i dont know how to use it right.
Here is the table and ajax code:
var open_events_table = $('#TabelleOffen').DataTable({
responsive: true,
paging: true,
searching: true,
processing: true,
language: { url: 'dtgerman.json' },
dom: "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'p>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
ajax: "term-abfrage.php?oTermine=1",
columns: [
{ data: 1, title: "Datum 1"},
{ data: 2, title: "Datum 2" },
{ data: 3, title: "Vorschlag" },
{ data: 8, title: "Ort"},
{ data: 10, title: "Art"},
{ data: null, title: "Maps",
render: function(data){
stylebutton = "<button class='btn btn-sm btn'><i class='fa fa-directions'></i></button>";
return stylebutton;
},
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
$(cell).off("click.cellClick").on("click", "button", rowData, get_maps); }
},
{ data: null, title: "Bewerben",
render: function(data){
if (items.includes(data[0])){
stylebutton = "<button id='"+data[0]+"' class='btn btn-sm btn-success'><i class='fa fa-minus'></i></button>";
} else {
stylebutton = "<button id='"+data[0]+"' class='btn btn-sm'><i class='fa fa-plus'></i></button>";
};
return stylebutton;
},
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
$(cell).on("click", "button", rowData, book_event).off("click.cellClick"); }
}
]});
function book_event(event) {
event.preventDefault();
var welcherbutton = event.data[0];
if ($(this).hasClass('btn-success')){
var status = 0;
$(this).removeClass('btn-success').children('i').removeClass('fa-minus').addClass('fa-plus');
$.post( "term-abfrage.php", { addtermin: 0, user: user, terminID: event.data[0] })
.done(function( data ) {
//alert( "Data Delete: " + data['meldung'] );
});
}else {
$('#distmodal').modal({backdrop: true});
$(".modal-footer > button").click(function() {
clicked = $(this).text();
if (clicked == "Bewerben"){
dist = $('#distkm').val();
if(!dist){
alert('Kein Entfernung angegeben!');
} else {;
$('#'+welcherbutton).addClass('btn-success').children('i').removeClass('fa-plus').addClass('fa-minus');
$.post( "term-abfrage.php", { addtermin: 1, user: user, terminID: event.data[0], dist: dist })
.done(function( data ) {
//alert( "Data saved: " + data['meldung'] );
$("#distmodal").modal('hide');
});
}
};
});
};
return true;
};
LG,
Ennox