button calls every ajax requests made before

Ennox

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

colin

Hi @Ennox ,

You could try one() and see if that helps. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

Ennox

Hello colin,

thanks for the comment, the one() not helps, because i need the button to toogle,
and don't solve it, the post call still made for all call before.

i add an example http://live.datatables.net/laqinuha/17/

but not sure if this help, because the post is maybe not allowed.

In the function for the click button the console.log is called twice, now! But in editing the console.log is called up to 4 times.

LG,
Ennox

Ennox

Hello again,

colin is right! one() will help here, at the right place!

i took the one() to the modal:

using

$(".modal-footer").one('click', 'button', function() {

instead

 $(".modal-footer > button").click(function() {

make the thing

Lg Ennox