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?

score 3 · Accepted Answer · answered May 09 '18 at 11:52

3

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/

answered May 09 '18 at 11:52

Siva Senthil

610
6
22

Super it's better in reaction. Just one things: How can I get my 'data.ID' like in createdRow? – YannickIngenierie May 09 '18 at 12:37
I add rowId: 'ID' in datatable settings to have a tr id=MyId but don't know how linked my Id and the confirmation button – YannickIngenierie May 09 '18 at 12:56

score 1 · Answer 2 · answered May 09 '18 at 13:13

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

This is insightful, thanks. And instead of using `createdRow` to capture the last_clicked_id, you can use `rowCallback` and capture the last_clicked_id by `$('td:eq(3) a.someBtn', row).on('click', function(){ last_clicked_data = data; });`, that way it cleaner than the createdRow method — Ng Sek Long, Mar 22 '19 at 02:38

score 0 · Answer 3 · answered May 09 '18 at 09:56

0

Try to add a confirmation before the $.ajax call

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

Doc

answered May 09 '18 at 09:56

Core972

4,065
3
31
45

Thanks for your quick respons. When I do It, a classical javascript popup appears (and after click ok/cancel button my bootstrap-confirmation appreas to). I know if I use this method, it's ok, But I want a "beautifull" popup of bootstrap-confirmation. All I read say use : drawCallback... but problem... – YannickIngenierie May 09 '18 at 10:02
For a beautiful alert then choose [Sweet Alert 2](https://sweetalert2.github.io/) – Core972 May 09 '18 at 10:06
It's not me can choose the compoment. I need to use bootstrap-confirmation like ask in question's title. Thanks :-) – YannickIngenierie May 09 '18 at 10:55

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

3 Answers3