Uncaught TypeError: $(...)[J72] is not a function - unable to get editor to work

chaseoes · August 2018

I'm trying to get the editor to work on a simple example table but keep getting the following error when trying to add a new item. Debugger doesn't give me any errors. It says this:

datatables.min.js:200 Uncaught TypeError: $(...)[J72] is not a function
    at Editor.(anonymous function).(anonymous function) [as _message] (<redacted link>/data-tables/datatables.min.js:200:117254)
    at Editor.(anonymous function).(anonymous function) [as error] (<redacted link>/data-tables/datatables.min.js:200:75725)
    at Editor.(anonymous function).(anonymous function) [as submit] (<redacted link>/data-tables/datatables.min.js:200:85459)
    at Editor.action (datatables.min.js:200)
    at HTMLButtonElement.<anonymous> (datatables.min.js:200)
    at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)

Debugger info:

#example
Data source:    Javascript
Processing mode:    Client-side
Draws:  1
Columns:    2
Rows - total:   0
Rows - after search:    0
Display start:  0
Display length: 10

15 tests complete. 2 problems were found:
Table ID    Problem description
#example    Your table is not inside a `container` or `container-fluid` element. This can cause the table to be misaligned due to the use of negative margins on the column layout used by DataTables for Bootstrap. Typically you should include a container element near the top level of your HTML.
-   Using FixedHeader without setting a `meta` tag to "user-scalable=no" will mean that FixedHeader does not work on Android devices as `position:fixed` is disabled in the browser under those conditions. Either add a suitable meta tag, or be aware that FixedHeader will not operate for Android users.

Here is my index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../../../favicon.ico"> -->

    <title>Case Tracker</title>

    <!-- Bootstrap core CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles/data-tables.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.17/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="styles/sticky-footer.css" rel="stylesheet">
    <link href="styles/materia.css" rel="stylesheet">



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script type="text/javascript" src="data-tables/datatables.min.js"></script>
    <script type="text/javascript" src="data-tables/Buttons-1.5.2/js/buttons.bootstrap4.min.js"></script>
    <script type="text/javascript" src="data-tables/Editor-2018-08-17-1.7.4/js/editor.bootstrap4.min.js"></script>
    <script type="text/javascript" src="data-tables/Select-1.2.6/js/select.bootstrap4.min.js"></script>

    <script src="js/popper.js"></script>
    <script src="js/tracker.js"></script>
    <script src="js/tooltip.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="data-tables/datatables.min.css"/>

  </head>

  <body>

    <header>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Case Tracker</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </header>

    <!-- Begin page content -->
    <main role="main" class="container">
      <h1 class="mt-5">Case tracker.</h1>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Item</th>
                <th>Status</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Item</th>
                <th>Status</th>
            </tr>
        </tfoot>
    </table>

    </main>

    <footer class="footer">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

  </body>
</html>

And this is the table JS (tracker.js):

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    // Object that will contain the local state
    var todo = {};

    // Create or update the todo localStorage entry
    if ( localStorage.getItem('todo') ) {
        todo = JSON.parse( localStorage.getItem('todo') );
    }

    // Set up the editor
    editor = new $.fn.dataTable.Editor( {
        table: "#example",
        fields: [
            {
                label: "Item:",
                name: "item"
            }, {
                label: "Status:",
                name: "status",
                type: "radio",
                def: "To do",
                options: [ 'To do', 'Done' ]
            }
        ],
        ajax: function ( method, url, d, successCallback, errorCallback ) {
            var output = { data: [] };

            if ( d.action === 'create' ) {
                // Create new row(s), using the current time and loop index as
                // the row id
                var dateKey = +new Date();

                $.each( d.data, function (key, value) {
                    var id = dateKey+''+key;

                    value.DT_RowId = id;
                    todo[ id ] = value;
                    output.data.push( value );
                } );
            }
            else if ( d.action === 'edit' ) {
                // Update each edited item with the data submitted
                $.each( d.data, function (id, value) {
                    value.DT_RowId = id;
                    $.extend( todo[ id ], value );
                    output.data.push( todo[ id ] );
                } );
            }
            else if ( d.action === 'remove' ) {
                // Remove items from the object
                $.each( d.data, function (id) {
                    delete todo[ id ];
                } );
            }

            // Store the latest `todo` object for next reload
            localStorage.setItem( 'todo', JSON.stringify(todo) );

            // Show Editor what has changed
            successCallback( output );
        }
    } );

    // Initialise the DataTable
    $('#example').DataTable( {
        dom: "Brtip",
        data: $.map( todo, function (value, key) {
            return value;
        } ),
        columns: [
            { data: "item" },
            { data: "status" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

All the other files are unedited downloaded from datatables.net.

allan · August 2018

Interesting. Are you able to give me a link to your page so I can debug it please?

The error message suggests that something is going wrong when an error message is being displayed to the end user. But I don't see anything in the code that would cause that to be displayed. If you can give me a link to the page, hopefully I'll be able to track it down.

Regards,
Allan

chaseoes · August 2018

Allan, I sent you a message with a link to the page.

Bindrid2 · August 2018

var dateKey = +new Date(); What does the + sign do?

chaseoes · August 2018

Not sure, that was file was copied and pasted directly from the Editor example code here: https://editor.datatables.net/examples/advanced/localstorage.html

allan · August 2018

Its a short cut - it basically just converts the Date object into a number due to Javascript's loose typing:

+new Date();

and

new Date().getTime()`

are the same thing.

@chaseoes: I'll check my PM's in a moment. Just going through my forum "rounds".

Allan

allan · August 2018

Got it - thanks for the PM!

The issue is that jQuery Slim is being used. The line that is failing (obfuscated) is:

el = $(el).stop();

jQuery slim doesn't include its animation support and to be honest, I hadn't realised that! At the moment the workaround is to use jQuery normal, but I'll add support for jQuery slim into the next version of Editor.

Thanks,
Allan

chaseoes · August 2018

Thank you! I can't get inline editing to work now, I added this code but it doesn't seem to make a difference:

$('#example').on( 'click', 'tbody td', function () {
    editor.inline( this );
} );

allan · August 2018

Can you link to the page showing the issue so I can debug it please?

Allan

Uncaught TypeError: $(...)[J72] is not a function - unable to get editor to work

Uncaught TypeError: $(...)[J72] is not a function - unable to get editor to work

Answers

Howdy, Stranger!

Categories

DataTables

Uncaught TypeError: $(...)[J72] is not a function - unable to get editor to work

Uncaught TypeError: $(...)[J72] is not a function - unable to get editor to work

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables