Using jqueryDataTables in Angular, getting childNodes error in Controller

Question

I'm using jqueryDataTables to sort data in tables in my app.

Rather then using a script tag on the page which it needs to be on, figured I could just include it inside of my Angular Controller code for that view, however I'm and getting a strange error.

I've used a mix of jQuery before inside of Angular, so not sure why it's not working in this case.

Error and code below: TypeError: Cannot read property 'childNodes' of undefined enter image description here

// Controller for Manage Users
app.controller('ManageUsersController', function($scope) {

    // Init
    $scope.status_dropdown = false;
    $scope.deactivate_btn = false;

    // Check all users:
    this.checkAll = function(target) {
        var checkboxes = document.getElementsByName('checkboxUser');
        var checkAll = document.getElementsByName('checkboxAll');

        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = checkAll[0].checked;
        }
    };

    alert('1');
    $('#manage_users_table').DataTable();
    alert('2');
});

HTML during first alert message: enter image description here

HTML during 2nd alert message, after DataTable() has been initialized: enter image description here

The alert pops up twice for each.

HTML
Gist: https://gist.github.com/leongaban/4f1de6bee8672b4177e5

<div id="manage_content" class="page" ng-controller="ManageUsersController as manageUsers">
    <table id="manage_users_table" width="100%">
        <tr>... hardcoded table data here



    <!-- PRODUCTION SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- DEVELOPMENT SCRIPTS -->
    <!-- Libs & Vendors -->
    <script src="src/js/libs/angular.min.js"></script>
    <script src="src/js/libs/angular-route.min.js"></script>
    <script src="src/js/libs/jquery.dataTables.js"></script>
    <script src="src/js/vendors/modernizr.min.js"></script>
    <script src="src/js/vendors/bootstrap.min.js"></script>

    <!-- Modules -->
    <script src="src/js/modules/app.js"></script>
    <script src="src/js/modules/products.js"></script>
    <script src="src/js/modules/manage.js"></script>
    <script src="src/js/modules/profile.js"></script>
</body>

omakoleg · Accepted Answer · 2014-10-13 19:50:27Z

1

Seems like this previous response didnt return data, which used to fill table. So You are trying to attach datatables script to empty table.

So I am assume error somewhere in loading table contents.

Small example with static data:

<html ng-app="someApp">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
</head>
<body>
  <div ng-controller="ManageUsersController">
        <table id="manage_users_table" class="display">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
  </div>
  <script type="text/javascript">
    var app = angular.module('someApp', []);
    app.controller('ManageUsersController', function($scope) {
        $('#manage_users_table').DataTable(); // <-- errors
    });
  </script>
</body>
</html>

answered Oct 13, 2014 at 19:50

omakoleg

5795 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

omakoleg Over a year ago

Could You provide html for the page? For an example paste it here: gist.github.com

Leon Gaban Over a year ago

Ah cool! I'll use that more often now, here is the link: gist.github.com/leongaban/4f1de6bee8672b4177e5 Do you need the Angular module as well?

omakoleg Over a year ago

I think all issues are because of this: <div class="manage_users_table"><table id="manage_users_table" width="100%"> You have same class name and the ID for table. Change class name and hopefully You will not see errors any more.

Leon Gaban Over a year ago

Ah interesting, so I removed the script tag form the template, changed the class name and uncommented the $('#manage_users_table').DataTable(); line and the table sort is working! But I'm still getting the Cannot read property 'childNodes' of undefined error which is causing other stuff to break. :( so strange. Going to keep working on this, but may just end up checking your answer, then writing a new one out

omakoleg Over a year ago

Maybe some stuff in routing. Like here: stackoverflow.com/questions/15697011/…

|

jithin john · Accepted Answer · 2017-07-22 11:55:06Z

1

The solution is simple

You are trying $('#manage_users_table').DataTable(); before the data is bind to the table. Try the same after data get binded. It works fine for me

answered Jul 22, 2017 at 11:55

jithin john

5724 silver badges12 bronze badges

Comments

Dan Atkinson · Accepted Answer · 2018-11-08 17:37:58Z

0

I came across this recently but realised what I'd done. You can avoid this problem by making use of the native setTimeout, or the AngularJS equivalent $timeout.

Below is an example of the $timeout implementation.

var myApp = angular.module('myApp', []);
app.controller('ManageUsersController', function($scope, $timeout) {

  //Executes when Angular has finished loading.
  $timeout(function() {
    $('#manage_users_table').DataTable();
  });
});

answered Nov 8, 2018 at 17:37

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

Collectives™ on Stack Overflow

Using jqueryDataTables in Angular, getting childNodes error in Controller

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related