Why bootstrap-confirmation on datatable fire server side code without clicking

Question

I've a bootstrap project, I use datatables pluging. And I want to add confirmation before delete a row. I can do it properly when I fill the table first with repeater and linkButton. But I want now, just send infomations what I need. Then I try to do it with serverside mode. Here my code :

  $('#LBENEF').DataTable({
        "aaSorting": [],
        "processing": true,
        "serverSide": true,
        "ajax": "/Beneficiaire/ListBeneficiaires.asmx/GetListBenef",
        "columnDefs": [{ "orderable": false, "targets": 6 }],
        "columns": [
            { "data": null, },
            { "data": "TypeLibelle", },
            { "data": "ID_CLIENT" },
            { "data": "NomPrenom" },
            { "data": "SitLibelle" },
            { "data": "PerimLibelle" },
            { "data": null }
        ],
        "createdRow": function (row, data, index) {
            if (!data.Actif) { $('td', row).eq(0).html("<span Class='glyphicon glyphicon-ban-circle'></span>"); }
            else { $('td', row).eq(0).html(""); }
            if (data.PeutConsult) { $('td', row).eq(6).html('<a href="/edit.aspx?ID=' + data.ID + '"><span Class="glyphicon glyphicon-pencil"></span></a>'); }
            if (data.PeutSup) { $('td', row).eq(6).append('<a onclick="DelBenef(' + data.ID + ');" data-toggle="confirmation" href="#"><span class="glyphicon glyphicon-trash"></span></a>'); }
        },
        drawCallback : function (oSettings) { $('[data-toggle="confirmation"]').confirmation(paramPopOverFileList);  }
    });

    function DelBenef(IdBen) {
        $.ajax(
            {
                type: "POST", url: "/toto.asmx/DelBenef", contentType: "application/json; charset=utf-8", dataType: "json", data:'{"IdBenef":' + IdBen + "}",
                success: function (msg) {
                    if (msg.d.Reussi) { $('#LBENEF').DataTable().ajax.reload(); }
                    else { AfficheMsgRetour(msg.d); }
                },
                error: function () { //Code errors
                       }
            });
    }

My Table appears good, I can search or order it and I can edit. My problem is when I click on trash icon, I see my popup confirmation but in same time DelBenef function on toto.asmx/DelBenef... Someone have an idea?

Answer 1

I have created a fiddle here with popup (with HTML content). The change in code performed to make it work was -

In drawcallback function

$("[data-toggle=confirmation]").confirmation({
    title: "Confirmation required!",
    html: true,
    content: "<h1> Are you sure you want to delete </h1>",
    onConfirm: function(event, element) {
        alert('Replace this alert with your ajax call!');
    }
});

The change in the createdRow function is only for test. You could replace it with a image like you have in your code.

Hope this helps!

https://jsfiddle.net/ksivasenthil/cxbacd3v/13/

Answer 2

Try to add a confirmation before the $.ajax call

function DelBenef(IdBen) ({
    if (window.confirm("Do you really want to delete this ?")) { 
        $.ajax({
            ...
        });
    }
})

Doc

Answer 3

Just to complete to respons give by Siva I find here a simple method

 <script>
    var last_clicked_id = null;
    $('#LBENEF').DataTable({
        rowId: 'ID',
        "aaSorting": [],
        "processing": true,
        "serverSide": true,
        "ajax": "/MaPage.asmx/GetListBenef",
        "columnDefs": [{ "orderable": false, "targets": 6 }],
        "columns": [
            { "data": null, },
            { "data": "TypeLibelle", },
            { "data": "ID_CLIENT" },
            { "data": "NomPrenom" },
            { "data": "SitLibelle" },
            { "data": "PerimLibelle" },
            { "data": null }
        ],
        "createdRow": function (row, data, index) {
            if (!data.Actif) { $('td', row).eq(0).html("<span Class='glyphicon glyphicon-ban-circle'></span>"); }
            else { $('td', row).eq(0).html(""); }
            if (data.PeutConsult) { $('td', row).eq(6).html('<a href="/BENEFICIAIRE/edit.aspx?ID=' + data.ID + '"><span Class="glyphicon glyphicon-pencil"></span></a>'); }
            if (data.PeutSup) { $('td', row).eq(6).append('<a onclick="last_clicked_id=' + data.ID + ';" data-toggle="confirmation" href="#"><span class="glyphicon glyphicon-trash"></span></a>'); }
        },
        drawCallback: function (oSettings) {
            paramPopOverFileList["onConfirm"] = function (event, element) { DelBenef(); };
            $('[data-toggle="confirmation"]').confirmation(paramPopOverFileList);
        }
    });

    function DelBenef() {
        $.ajax(
            {
                type: "POST", url: "/MaPage.asmx/DelBenef", contentType: "application/json; charset=utf-8", dataType: "json", data: '{"IdBenef":' + last_clicked_id + "}",
                success: function (msg) {
                    if (msg.d.Reussi) { $('#LBENEF').DataTable().ajax.reload(); }
                    else { AfficheMsgRetour(msg.d); }
                },
                error: function () { AfficheMsgRetour({ Titre: "Désactivation bénéficiaire", Reussi: false, Msg: "Erreur accès fonction" }); }
            });
    }
</script>

Just use a global variable associated singleton=true(already done). I update this one in onclik on link element. Enjoy it