button disable not working

montoyam

I am having trouble getting the button.disable to work. I am guessing I have the wrong syntax somewhere? I am getting the 'got here' alert, so I know the if statement is correct.

            var SubmissionNotesTable = $('#SubmissionNotes').DataTable({
                dom: 'Bfrtip',
                ajax: {
                    url: 'api/SubmissionNotes',
                    type: 'post',
                    data: function (d) {
                        var selected = SubmissionsTable.row({ selected: true });
                        if (selected.any()) {
                            d['SubmissionIDFilter'] = selected.data().Submissions.SubmissionID;
                        }
                    }
                },
                columns: [
                    { data: "SubmissionNotes.SubmissionNote" },
                    { data: "SubmissionNotes.EnteredBy" },
                    { data: "SubmissionNotes.RecordAdded" },
                    {
                        data: "Attachments.FileName",
                        render: function (data, type, row) {
                            return data? "<a href=" + row.Attachments.WebPath + " target='_blank'>" + data + "</a>":null;
                        }
                    },
                ],
                select: { style: 'single' },
                //order: [[2, 'asc']],
                lengthChange: false,
                buttons: [
                    { extend: 'create', editor: SubmissionNotesEditor, enabled: false},
                    { extend: 'edit', text: 'Edit/View', editor: SubmissionNotesEditor },
                    { extend: 'remove', editor: SubmissionNotesEditor }
                ]
            });

            /**************************************************/

            if (permissionID != 1) {
                alert("got here");
                SubmissionNotesTable.button('remove:name').disable();
            }

rf1234

you need to assign a name to the remove button. Something like
{ extend: 'remove', editor: SubmissionNotesEditor, name: 'remove' }
Here is one with name and className --- name is like #id and className is like .class - if you know what I mean ...
{ extend: "create", editor: ctrEditor, className: "editorOnly notDuplicate", name: "createContract"},

Forgot to mention: Your code might not work for a differen reason as well: You would need to use an event. Javascript is asynchronous ... I know it is a pain. So, you should execute your "permissionsID" code only on "init" because that makes sure table initialization has been completed when your code is being executed. Check the data tables event list. (It is late; no links. You'll find it in the docs.)

https://datatables.net/reference/event/init

montoyam

No, permissionsID is loaded in an ajax code and on success I 'draw' the datatables:
```
$(document).ready(function () {
userNameCookie = readCookie('userNameCookie');
$.ajax({
url: "api/GetPermissionsID",
dataType: 'json',
method: "POST",
success: function (response) {
// returns: {"Table":[{"PermissionID":1}]}
if (response.Table.length !== 0) {
permissionID = response.Table[0].PermissionID;
} else { permissionID = 0; }

            if (permissionID != 0) {
                setCookie("permissionsCookie", permissionID, 1);
                drawTables();
            } else {
                $('.body').html('<h3><br/><br/><br/>Sorry, you do not have permissions to view this page</h3>');
            }
        }
    });

    function drawTables() {

        var SubmissionsEditor = new $.fn.dataTable.Editor({``

montoyam

I have added a name for the button, but it still is not being disabled. the alert popup is working so I know it gets that far.

            var SubmissionNotesTable = $('#SubmissionNotes').DataTable({
                dom: 'Bfrtip',
                ajax: {
                    url: 'api/SubmissionNotes',
                    type: 'post',
                    data: function (d) {
                        var selected = SubmissionsTable.row({ selected: true });
                        if (selected.any()) {
                            d['SubmissionIDFilter'] = selected.data().Submissions.SubmissionID;
                        }
                    }
                },
                columns: [
                    { data: "SubmissionNotes.SubmissionNote" },
                    { data: "SubmissionNotes.EnteredBy" },
                    { data: "SubmissionNotes.RecordAdded" },
                    {
                        data: "Attachments.FileName",
                        render: function (data, type, row) {
                            return data? "<a href=" + row.Attachments.WebPath + " target='_blank'>" + data + "</a>":null;
                        }
                    },
                ],
                select: { style: 'single' },
                //order: [[2, 'asc']],
                lengthChange: false,
                buttons: [
                    { extend: 'create', editor: SubmissionNotesEditor, enabled: false},
                    { extend: 'edit', text: 'Edit/View', editor: SubmissionNotesEditor },
                    { extend: 'remove', name: 'remove', editor: SubmissionNotesEditor }
                ]
            });

            /**************************************************/

            if (permissionID != 1) {
                alert("got here");
                SubmissionNotesTable.button('remove:name').disable();
            }

rf1234

ok, just wrap your permissionId logic in an event. Your alert is probably triggered at a point when table initialization hasn't been completed. But Javascript doesn't "wait" ... hence you need to have an event telling you that the data table is ready.

SubmissionNotesTable
    .on('init', function () {            
       if (permissionID != 1) {
            alert("got here");
            SubmissionNotesTable.button('remove:name').disable();
        }
    })

montoyam

that did not seem to work either. here is most of the js in case there is something else going on...warning...there is a lot and I'm sure some of the code could be re-written more efficiently!!

(function ($) {
    var userNameCookie;

    function readCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        var npos = keyValue ? keyValue[2].indexOf('=') : null;
        var value = keyValue ? keyValue[2].split("=").pop() : null;
        var lookFor = 'CO\\';
        return value.replace(lookFor,'');
    }

    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    $(document).ready(function () {
        userNameCookie = readCookie('userNameCookie');
        $.ajax({
            url: "api/GetPermissionsID",
            dataType: 'json',
            method: "POST",
            success: function (response) {
                // returns:  {"Table":[{"PermissionID":1}]}
                if (response.Table.length !== 0) {
                    permissionID = response.Table[0].PermissionID;
                } else { permissionID = 0; }

                if (permissionID != 0) {
                    setCookie("permissionsCookie", permissionID, 1);
                    drawTables();
                } else {
                    $('.body').html('<h3><br/><br/><br/>Sorry, you do not have permissions to view this page</h3>');
                }
            }
        });

        function drawTables() {


            var SubmissionNotesEditor = new $.fn.dataTable.Editor({
                ajax: {
                    url: 'api/SubmissionNotes',
                    data: function (d) {
                        var selected = SubmissionsTable.row({ selected: true });
                        if (selected.any()) {
                            d['SubmissionIDFilter'] = selected.data().Submissions.SubmissionID;
                        }
                    }
                },
                table: '#SubmissionNotes',
                template: '#notesEditorForm',
                fields: [
                    { label: "SubmissionID:", name: "SubmissionNotes.SubmissionID", type: "readonly" },
                    { label: "Note:", name: "SubmissionNotes.SubmissionNote", type: "textarea" },
                    {
                        label: "File:",
                        name: "SubmissionNotes.AttachmentID",
                        type: "upload",
                        display: function (file_id) {
                            return "<a href=" + SubmissionNotesEditor.file('Attachments', file_id).WebPath + " target='_blank'>" +  SubmissionNotesEditor.file('Attachments', file_id).FileName + "</a>";
                        },
                        clearText: "Clear",
                        noImageText: 'No file'
                    },
                    {
                        label: "Added By",
                        name: "SubmissionNotes.EnteredBy",
                        def: function () {
                            return userNameCookie;
                        }
                        , type: "readonly"
                    },
                    {
                        label: "Record Added",
                        name: "SubmissionNotes.RecordAdded",
                        type: "readonly",
                        def: function () {
                            var d = new Date();
                            return d;
                        }

                    }
                ]
            });

            var SubmissionNotesTable = $('#SubmissionNotes').DataTable({
                dom: 'Bfrtip',
                ajax: {
                    url: 'api/SubmissionNotes',
                    type: 'post',
                    data: function (d) {
                        var selected = SubmissionsTable.row({ selected: true });
                        if (selected.any()) {
                            d['SubmissionIDFilter'] = selected.data().Submissions.SubmissionID;
                        }
                    }
                },
                columns: [
                    { data: "SubmissionNotes.SubmissionNote" },
                    { data: "SubmissionNotes.EnteredBy" },
                    { data: "SubmissionNotes.RecordAdded" },
                    {
                        data: "Attachments.FileName",
                        render: function (data, type, row) {
                            return data? "<a href=" + row.Attachments.WebPath + " target='_blank'>" + data + "</a>":null;
                        }
                    },
                ],
                select: { style: 'single' },
                //order: [[2, 'asc']],
                lengthChange: false,
                buttons: [
                    { extend: 'create', editor: SubmissionNotesEditor, enabled: false},
                    { extend: 'edit', text: 'Edit/View', editor: SubmissionNotesEditor },
                    { extend: 'remove', editor: SubmissionNotesEditor, name: 'remove' }
                ]
            });

            /**************************************************/

            SubmissionNotesTable
                .on('init', function () {
                    if (permissionID != 1) {
                        alert("got here");
                        SubmissionNotesTable.button('remove:name').disable();
                    }
                })

            SubmissionsTable.on('select', function (e) {
                var selectedRows = SubmissionsTable.rows({ selected: true }).count();
                SubmissionNotesTable.button(0).enable(selectedRows === 1);
                SubmissionNotesTable.ajax.reload();

                SubmissionNotesEditor
                    .field('SubmissionNotes.SubmissionID')
                    .def(SubmissionsTable.row({ selected: true }).data().Submissions.SubmissionID);
            });

            SubmissionsTable.on('deselect', function () {
                var selectedRows = SubmissionsTable.rows({ selected: true }).count();
                SubmissionNotesTable.button(0).enable(selectedRows === 1);
                SubmissionNotesTable.ajax.reload();
            });

            SubmissionsEditor.on('submitSuccess', function () {
                SubmissionNotesTable.ajax.reload();
            });

            SubmissionNotesEditor.on('submitSuccess', function () {
                SubmissionsTable.ajax.reload();
            });

kthorngren

Your code to disable the button works in this example:
http://live.datatables.net/pasigebo/1/edit

Its been simplified for the example. Does the alert("got here"); fire? Doesn't look like permissionID is a global variable so not sure where it would get the value.

Kevin

montoyam

yes, the alert is successfully triggered. I just removed the if() condition and the button still does not disable. How odd is that.

I have used buttons.destroy successfully in another application, but you can't destroy a single button, just the collection, right?

kthorngren

Are you trying to disable or remove? If remove then use button().remove(). I just realized that you can disable the remove button but it will automatically be enabled when selecting a row. If you want to leave it on the page but keep it disabled then you will need to add your if statement and disable code into the select event.

Kevin

montoyam

oh my goodness, thank you so much. I didn't know about remove and didn't realize that the typical enable/disable code was overriding my code. I don't care if it is disabled or removed, whatever works, and it looks like remove is the answer.

so, with what you showed me about assigning a name to a button, this now works:

            if (permissionID != 1) {
                SubmissionNotesTable.button('remove:name').remove();
            }