Destroy bootbox

Question

var userDatatable = function (id) {
    $('#datatable_users_container').removeClass('hide');
    goToByScroll('datatable_users_container');

    var dUser = $('#datatable_users').DataTable({
        "responsive"    : true,
        "processing"    : true,
        "serverSide"    : true,
        "destroy"       : true,
        "ajax"          : function (data, callback, settings) {
            $.ajax({
                url         : api.institutions + '/' + id + '/users',
                type        : 'get',
                data        : {
                    'page'      : $('#datatable_users').DataTable().page.info().page + 1,
                    'per_page'  : data.length,
                    'order_by'  : data.order[0].dir,
                    'sort_by'   : data.columns[data.order[0].column].data,
                },
                dataType    : 'json',
                success     : function (response) {
                    callback({
                        recordsTotal    : response.meta.pagination.total,
                        recordsFiltered : response.meta.pagination.total,
                        data            : response.data
                    });

                    // Görselde düzgün görünsün diye, son sütunu ortalar.
                    $('#datatable_users thead th:last').addClass('text-center');
                    $('#datatable_users tbody tr').each(function () {
                        $(this).find('td:last').addClass('text-center');
                    });
                }
            });
        },
        "columns"       : [
            {"data" : "identifier"},
            {"data" : "fullName"},
            {"data" : "email" },
            {"data" : "userType", render : function (data, type, row, meta) {
                if (row.userType == 0) return "Admin";
                if (row.userType == 1) return "Şef";
                if (row.userType == 2) return "Uzman";
            }},
            {"data" : "actions", render : function (data, type, row, meta) {
                return  '<div class="btn-group btn-group-circle btn-group-solid" style="position: relative !important;">' +
                    '<a href="/templates/'+row.identifier+'" class="btn btn-sm green"><i class="icon-magnifier"></i></a>' +
                    '<a href="/templates/edit/'+row.identifier+'" class="btn btn-sm yellow"><i class="icon-note"></i></a>' +
                    '<button class="btn btn-sm red remove-user" data-id="'+row.identifier+'"><i class="icon-trash"></i></button>' +
                    '</div>';
            }},
        ],
        "columnDefs"    : [
            {
                "targets": 'no-sort',
                "orderable": false
            }
        ],
        "bFilter"       : false,
        "sPaginationType": "full_numbers",
    });

    $('#datatable_users tbody').on('click', '.remove-user', function () {
        var identifier = $(this).attr('data-id');
        var dialog = bootbox.confirm({
            size    : 'small',
            message : '<div class="text-center">Silmek istediğinize emin misiniz ?</div>',
            buttons : {
                confirm : {
                    label       : '&nbsp;&nbsp;&nbsp;Evet&nbsp;&nbsp;&nbsp;',
                    className   : 'red-mint'
                },
                cancel : {
                    label       : 'Vazgeç',
                    className   : 'grey-salsa'
                }
            },
            callback : function (result) {
                if (!result)
                    return;

                $.ajax({
                    url         : api.users + '/' + identifier,
                    type        : 'delete',
                    dataType    : 'json',
                    success     : function (response) {
                        toastr.success('Çalışan <em>"'+response.data.fullName+'"</em> silindi.');
                        dUser.ajax.reload(null, false);
                    }
                });
            }
        }).find('.modal-footer').css({'text-align' : 'center'});
    });
};

When the user click the button, i call userDatatable and reinitialize datatable. First time, when i click the delete button on the datatable, bootbox appears one-time (everything is ok). But if i close the datatable and reinitalize again, this time when i click the delete button on the datatable, bootbox appears two-time and so on.

I want to reinitialize bootbox again with datatable. I try to destroy modal in click event, before bootbox.confirm call. This time, confirm button does not work.

How can i destroy bootbox completely and reinitialize again.

Answer 1

That's because you bind the click in the function userDatatable so every time you call it, you add bind to the button so after you refresh the dataTable you "have 2 binds" on the button.

The solution is to bind the click outside userDatatable function.