editor.enable(); not working?

burnchar · May 2015

editor.disable(['SOME_FIELD']);  // works, disables SOME_FIELD
editor.disable();  // works, disables all editor fields
editor.enable(['SOME_FIELD']);  // works, enables SOME_FIELD
editor.enable();  // dataTables.editor.min.js:38 Uncaught TypeError: Cannot read property 'enable' of undefined

JQuery 2.1.3
DataTables 1.10.7
Editor v1.4.2

Server-side

Array-based data

Complete code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - TableMan</title>
    <link href="/Scripts/DataTables/extensions/Editor/css/dataTables.editor.css" rel="stylesheet"/>
<link href="/Scripts/DataTables/extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"/>
<link href="/Scripts/DataTables/extensions/TableTools/css/dataTables.tableTools.css" rel="stylesheet"/>
<link href="/Scripts/DataTables/media/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="/Content/select2.css" rel="stylesheet"/>


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">TableMan</a>
            </div>
            <div class="navbar-collapse collapse">
                <section id="login">
                    <span class="username">Logged in as SOME_USER</span>
                    <span><a href="/Account/LogOff?ReturnUrl=http%3A%2F%2Flocalhost%3A62865%2FEditor%3Fid%3D3">Log Off</a></span>
                </section>
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                    <li><a href="/Manage/Builder">Build an Editor</a></li>
                </ul>
                
            </div>
        </div>
    </div>
    <div class="container body-content">
        

<br /><br /><br /><br />
<h1>Editing SOME_TABLE</h1>
<table id="editor" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        
        <tr>
 <th>EQPID</th>  <th>RULE</th>      </tr>
    </thead>

    <tfoot>
        <tr>
 <th>EQPID</th>  <th>RULE</th>      </tr>
    </tfoot>
</table>
        <hr />
        <footer>
            <p>&copy; 2015 - Charles N. Burns</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="/Scripts/DataTables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="/Scripts/DataTables/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="/Scripts/DataTables/extensions/Editor/plugins/editor.datetimepicker.js"></script>
<script src="/Scripts/DataTables/extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="/Scripts/DataTables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js"></script>
<script src="/Scripts/select2.min.js"></script>

    
    <script type="text/javascript">
    var editor;
    $(document).ready(function() {
        var reportTitle = "TableMan SOME_TABLE saved " + moment().format();
        editor = new $.fn.dataTable.Editor({
            "idSrc": 0,
            "ajaxUrl": {
                "create":   'POST /API/Crud' + "?e=" + "3",
                "edit"  :    'PUT /API/Crud' + "?e=" + "3",
                "remove": 'DELETE /API/Crud' + "?e=" + "3"
            },
            "ajax": function(method, url, data, successCallback, errorCallback) {
                $.ajax({
                    "type": method,
                    "url": url,
                    "data": JSON.stringify(data),
                    "contentType": "application/json",
                    "dataType": "json"
                })
                .done(function(json) { successCallback(json); })
                .error(function(xhr, error, thrown) { errorCallback(xhr, error, thrown); });
            },
            fields: [{"name":"EQPID","data":1,"label":"EQPID","type":"text"},{"name":"RULE","data":2,"label":"RULE","type":"text"}],
            "table": "#editor"
        });

        editor.on('preSubmit', function(e, submission, action) {
            if (action === 'create' || action === 'edit') {
                for (key in submission.data) {
                    if (submission.data.hasOwnProperty(key) && moment(submission.data[key], moment.ISO_8601).isValid())
                        submission.data[key] = moment(submission.data[key], moment.ISO_8601).format();
                }
            }
        });

        editor.on('initEdit', function () {
            editor.enable(); // This breaks
            editor.disable(); // This doesn't (??)
            editor.enable(["EQPID"]);
            editor.disable(["EQPID"]);
        });

        editor.on('initCreate', function () {
        });

        var $dtOptions = {
            dom: '<"tabletools"T>lfrtip',
            "deferRender": true,
            "ajax": {
                url: '/API/Crud' + "?e=" + 3,
                dataSrc: function(json) {
                    for (var rowkey in json.data) {
                        if (json.data.hasOwnProperty(rowkey))
                            for (var colkey in json.data[rowkey]) {
                                if (json.data[rowkey].hasOwnProperty(colkey) && moment(json.data[rowkey][colkey], moment.ISO_8601).isValid()) {
                                    json.data[rowkey][colkey] = json.data[rowkey][colkey].replace('T', ' ');
                                }
                            }
                    }
                    return json.data;
                }
            },
            serverSide: true,
            processing: true,
            columns: [{"data":1,"visible":false,"searchable":false},{"data":2,"searchable":false}],
            tableTools: {
                "sSwfPath": "/Content/swf/copy_csv_xls.swf",
                sRowSelect: "os",
                aButtons: [{
                    sExtends: "select_single",
                    sButtonText: "Duplicate row",
                    fnClick: function( button, config ) {
                        var node = this.fnGetSelected();
                        if(node.length == 1) {
                            var values = editor.edit( node[0], false ).val();
                            editor
                                .create({
                                    title: 'Make any desired changes',
                                    buttons: 'Create from existing'
                                })
                                .set(values);
                        }
                    } 
                },
                { sExtends: "editor_create", editor: editor  },
                { sExtends: "editor_edit", editor: editor  },
                { sExtends: "editor_remove", editor: editor  },
                { sExtends: "copy", "sButtonText": "Copy to clipboard" },
                { sExtends: "csv", "sButtonText": "Spreadsheet", "sTitle": reportTitle },
                { sExtends: "print",  "bShowAll": false }]
            },
            "order": [],
            "initComplete": function( settings, json ) {
            }
        };

        var $dtOverrides = {};
        var $dataTable = $('#editor').DataTable($.extend(true, $dtOptions, $dtOverrides));

        // Add an input field to each column
        $('#editor tfoot th:nth-child(1)').each( function () {
            var title = $('#editor thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search ' + title + '" />' );
        } );

        // Apply the search
        $dataTable.columns().eq( 0 ).each( function ( colIdx ) {
            $( 'input', $dataTable.column( colIdx ).footer() ).on( 'keyup', function () {
                $dataTable
                    .column( colIdx )
                    .search( this.value )
                    .draw();
            });
        });
    });

    function buttonNoPermission(button, conf) {
        alert('Unfortunately, the "' + button.text + '" feature if this editor is not enabled for your account.');
    }

</script>

allan · May 2015

Hi,

Thanks for all the details and letting me know about this. There is indeed a bug in bot enable() and disable() in 1.4.2 I'm sorry to say.

In both functions you will find the following:

    if ( ! $.isArray( name ) ) {
        name = [ name ];
    }

The block (in both functions) should be replaced with:

    if ( ! name ) {
        name = this.fields();
    }
    else if ( ! $.isArray( name ) ) {
        name = [ name ];
    }

I'll have this in the next release.

Regards,
Allan

burnchar · May 2015

I've thoroughly used DataTables since 2011 and Editor since its first release and this would be the first actual bug I've found. The last time I thought I found one back in 2013, it turned out to be Microsoft's.

And you even provided the code for a fix an hour after the report. Awesome!

editor.enable(); not working?

editor.enable(); not working?

Server-side

Array-based data

Answers

Howdy, Stranger!

Categories

DataTables

editor.enable(); not working?

editor.enable(); not working?

Server-side

Array-based data

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables