Your latest build is broken - $loading -> undefined

[gtesslerge]

Hi

When I use your code in USAGE WITH OPTIONS, in my code, it breaks.

TypeError: undefined is not a function
at Object.angular.module.factory._showLoading [as showLoading

Also

I have to specify the 2 builders else they are null.
[ '$scope', '$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder',
function ( $scope, $resource, DTOptionsBuilder, DTColumnDefBuilder ) {

Can you help?

[l-lin]

Can you provide your full code?

[gtesslerge]

No..... Company wont allow it. Tell me why the above posted code not work.

[gtesslerge]

here it is

<!--
START: file ajsDatatablesWorklist.tmpl.html

-->

<div id="devAjsDatatablesId" data-ng-controller="angularJsDatatablesInteractiveCtrl" >
    <div>
aaa6969
Worklist
        <table datatable="ng" class="row-border hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>FirstName</th>
                <th>LastName</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="person in persons">
                <td>{{ person.id }}</td>
                <td>{{ person.firstName }}</td>
                <td>{{ person.lastName }}</td>
            </tr>
            </tbody>
        </table>
<!--
        <table datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover" >
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
                <tr>
                    <td>123</td>
                    <td>Someone</td>
                    <td>Youknow</td>
                </tr>
                <tr>
                    <td>987</td>
                    <td>Iamout</td>
                    <td>Ofinspiration</td>
                </tr>
            </tbody>
        </table>
-->
    </div>
</div>
<!--
END: file ngGridWorklist.tmpl.html
-->

// file ajsDatatablesWorklist.js

/**
    controller for ajsDatatablesWorklist
  */
'use strict';

define (
    'requireModuleControllerAngularJsDatatablesWorklist',
    [   'angular',
        'requireModuleConsoleLogging',
        'requireModuleAngularDatatables',
        'datatables'
    ],
    function ( angular, ConsoleLogging, AjsDatatables, Datatables ) {

        console.logIn ( globalGeArgus.DebugConsoleControl.boolEnableInteractivePage, 'requireModuleAngularDatatables rjs module define' );

        // Controller definition

        angular.module (
          'interactiveControllerAngularJsDatatables',
            [ 'ngResource', 'datatables' ] )
          .controller (
            'angularJsDatatablesInteractiveCtrl',
            [ '$scope', '$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder',
                function ( $scope, $resource, DTOptionsBuilder, DTColumnDefBuilder ) {

                    console.logIn ( globalGeArgus.DebugConsoleControl.boolEnableInteractivePage, 'angularJsDatatablesInteractiveCtrl init' );
//aaa
                    debugger;
                    //**************************************
                    // local scopes start
                    //**************************************

                    //**************************************
                    // local scopes end
                    //**************************************
// http://l-lin.github.io/angular-datatables/#/gettingStarted

                    //**************************************
                    // public scopes start
                    //**************************************

                    $scope.m_strBatarangId = 'batarangScopeAngularJsDatatablesInteractiveCtrl'; // unique id for easy identification in Batarang plugin


//aaa
                    debugger;

                    $scope.dtOptions =
                        DTOptionsBuilder.newOptions()
                            .withPaginationType ( 'full_numbers' )
                            .withDisplayLength ( 2 )
                            .withDOM ( 'pitrfl' );

                    $scope.dtColumnDefs =
                        [
                            DTColumnDefBuilder.newColumnDef ( 0 ).notSortable(),
                            DTColumnDefBuilder.newColumnDef ( 1 ).notVisible(),
                            DTColumnDefBuilder.newColumnDef ( 2 )
                        ];

                    //**************************************
                    // public scopes end
                    //**************************************


                    //**************************************
                    // local functions start
                    //**************************************


                    //**************************************
                    // local functions end
                    //**************************************


                    //**************************************
                    // public functions start
                    //**************************************

                    $scope.$on (
                        'event:dataTableLoaded',
                        function ( event, loadedDT ) {

                            console.logIn ( globalGeArgus.DebugConsoleControl.boolEnableDevPage, 'ajsdt loaded' );
//aaa
                            debugger;
                            console.logOut ( globalGeArgus.DebugConsoleControl.boolEnableDevPage, 'ajsdt loaded' );
                        }
                    );

                    //**************************************
                    // public functions end
                    //**************************************

                    console.logOut ( globalGeArgus.DebugConsoleControl.boolEnableInteractivePage, 'angularJsDatatablesInteractiveCtrl init' );
                }
            ]
        ); // end controller

        console.logOut ( globalGeArgus.DebugConsoleControl.boolEnableInteractivePage, 'requireModuleAngularDatatables rjs module define' );

    } // end requirejs define
);

// last line in file

TypeError: undefined is not a function
    at Object.angular.module.factory._showLoading [as showLoading] (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-datatables/dist/angular-datatables.js:865:20)
    at angular.module.directive.link (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-datatables/dist/angular-datatables.js:380:29)
    at http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:64:113
    at v (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:54:213)
    at g (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:47:135)
    at g (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:47:152)
    at v (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:54:154)
    at g (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:47:135)
    at http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:46:258
    at Kd.link (http://localhost:9002/scripts/nonAngular/openSource/angular/angular-1.2.22/angular.min.js:196:330) <table datatable="ng" class="row-border hover ng-isolate-scope"> angular.js:10046
101. In anonymous function (): NgTableInteractiveCtrl init -- ngTableWorklist.js consoleLoggingHelpers.js:305
102. Out anonymous function (): ngTableInteractiveCtrl init -- ngTableWorklist.js consoleLoggingHelpers.js:305
103. In anonymous function (): TrNgGridInteractiveCtrl init -- trNgGrid.js consoleLoggingHelpers.js:305
104. Out anonymous function (): TrNgGridInteractiveCtrl init -- trNgGrid.js consoleLoggingHelpers.js:305
new selection trNgGrid.js:154
de-selected item 

[l-lin]

Mmmh, is it because of requireJS? Can you try without it and tell me the result?

[l-lin]

I think I know why it shows this problem. In fact, angular is not using jquery's functions but it's own jqlite.
However, in the angular-datatables module, I'm using jQuery's function (such as jQuery.show() that seems to be the problem).
So all you need to do is to include the dependency to jquery for angular in your requireJS configuration.
For example:

require.config({
    paths: {
        angular: '../bower_components/angular/angular',
        angularRoute: '../bower_components/angular-route/angular-route',
        angularMocks: '../bower_components/angular-mocks/angular-mocks',
        text: '../bower_components/requirejs-text/text',
        jquery: '../bower_components/jquery/dist/jquery',
        datatables: '../bower_components/datatables/media/js/jquery.dataTables',
        angularDatatables: '../bower_components/angular-datatables/dist/angular-datatables'
    },
    shim: {
        'angular' : {
            // This is where you need to add to make it work
            deps: ['jquery'],
            'exports' : 'angular'
        },
        'angularRoute': ['angular'],
        'angularMocks': {
            deps:['angular'],
            'exports':'angular.mock'
        },
        'angularDatatables': {
            deps:['angular', 'jquery', 'datatables']
        }
    },
    priority: [
        "angular"
    ]
});

I managed to make it work with the angular-requirejs-seed.

[gtesslerge]

Hi Louis

I already had it dependent on jquery but it doesn’t work for you use: angular’s
function ($timeout, DTLoadingTemplate, DT_DEFAULT_OPTIONS) {
var $loading = angular.element(DTLoadingTemplate.html), _showLoading = function ($elem) {
$loading.show();

Maybe I should change

From:

angular.module('datatables.renderer', [
'datatables.factory',
'datatables.options'
]).factory('DTRendererFactory', [
'$timeout',
'DTLoadingTemplate',
'DT_DEFAULT_OPTIONS',
function ($timeout, DTLoadingTemplate, DT_DEFAULT_OPTIONS) {
var $loading = angular.element(DTLoadingTemplate.html), _showLoading = function ($elem) {
$loading.show();
$elem.after($loading);
$elem.hide();

To:
Include [‘angular’ ]

?

Gary

[IMG0000]

From: Louis LIN [mailto:notifications@github.com]
Sent: Monday, August 25, 2014 12:12 PM
To: l-lin/angular-datatables
Cc: Tessler, Gary (GE Healthcare)
Subject: Re: [angular-datatables] Your latest build is broken - $loading -> undefined (#58)

I think I know why it shows this problem. In fact, angular is not using jquery's functions but it's own jqlite.
However, in the angular-datatables module, I'm using jQuery's function (such as jQuery.show()http://api.jquery.com/show/ that seems to be the problem).
So all you need to do is to include the dependency to jquery for angular in your requireJS configuration.
For example:

require.config({

paths: {

    angular: '../bower_components/angular/angular',

    angularRoute: '../bower_components/angular-route/angular-route',

    angularMocks: '../bower_components/angular-mocks/angular-mocks',

    text: '../bower_components/requirejs-text/text',

    jquery: '../bower_components/jquery/dist/jquery',

    datatables: '../bower_components/datatables/media/js/jquery.dataTables',

    angularDatatables: '../bower_components/angular-datatables/dist/angular-datatables'

},

shim: {

    'angular' : {

        // This is where you need to add to make it work

        deps: ['jquery'],

        'exports' : 'angular'

    },

    'angularRoute': ['angular'],

    'angularMocks': {

        deps:['angular'],

        'exports':'angular.mock'

    },

    'angularDatatables': {

        deps:['angular', 'jquery', 'datatables']

    }

},

priority: [

    "angular"

]

});

I managed to make it work with the angular-requirejs-seedhttps://github.com/tnajdek/angular-requirejs-seed.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/58#issuecomment-53313169.

[gtesslerge]

If I do this:

$( $loading ).show -> undefined

yet

$( $loading ).show() - is defined.

Please advise. It appears that
var $loading = angular.element(DTLoadingTemplate.html)
is returning NOT a jquery object even though the ajs docs say it should.

Thanks

Gary

[IMG0000]

From: Louis LIN [mailto:notifications@github.com]
Sent: Monday, August 25, 2014 12:12 PM
To: l-lin/angular-datatables
Cc: Tessler, Gary (GE Healthcare)
Subject: Re: [angular-datatables] Your latest build is broken - $loading -> undefined (#58)

I think I know why it shows this problem. In fact, angular is not using jquery's functions but it's own jqlite.
However, in the angular-datatables module, I'm using jQuery's function (such as jQuery.show()http://api.jquery.com/show/ that seems to be the problem).
So all you need to do is to include the dependency to jquery for angular in your requireJS configuration.
For example:

require.config({

paths: {

    angular: '../bower_components/angular/angular',

    angularRoute: '../bower_components/angular-route/angular-route',

    angularMocks: '../bower_components/angular-mocks/angular-mocks',

    text: '../bower_components/requirejs-text/text',

    jquery: '../bower_components/jquery/dist/jquery',

    datatables: '../bower_components/datatables/media/js/jquery.dataTables',

    angularDatatables: '../bower_components/angular-datatables/dist/angular-datatables'

},

shim: {

    'angular' : {

        // This is where you need to add to make it work

        deps: ['jquery'],

        'exports' : 'angular'

    },

    'angularRoute': ['angular'],

    'angularMocks': {

        deps:['angular'],

        'exports':'angular.mock'

    },

    'angularDatatables': {

        deps:['angular', 'jquery', 'datatables']

    }

},

priority: [

    "angular"

]

});

I managed to make it work with the angular-requirejs-seedhttps://github.com/tnajdek/angular-requirejs-seed.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/58#issuecomment-53313169.

[l-lin]

Mh, weird.
What does DTLoadingTemplate.html return?
How about angular.element?

[gtesslerge]

If I change it from

var $loading = angular.element ( DTLoadingTemplate.html ),

to

var $loading = $( angular.element ( DTLoadingTemplate.html ) ),

it is no longer undefined.

[l-lin]

Can you show me your requireJS config?

[gtesslerge]

    'requireModuleAngularDatatables' : {
        deps: [ 'angular', 'jquery', 'datatables' ]
    },

if you send me a private email, we can set up a webex to share my screen and I can call you too?
Are you in the USA?

[l-lin]

No, I don't live in USA. I'm from France.
You can find my email from my profile, but I'm not sure that your company will allow you to share this project wholly.

I think you just need to make sure that you really have a dependency to jQuery from Angular. Not just your module.

    shim: {
        'angular' : {
            // This is where you need to add to make it work
            deps: ['jquery'],
            'exports' : 'angular'
        },

[gtesslerge]

yes i already have that

[gtesslerge]

I can talk today. blocked until we resolve the code issue

[thespiffyitalian]

gtess, chill out a bit. I understand that you're using this for a work project and that you're stressed out, but the tone I'm getting from your posts is really rude. l-lin made this on her own time and open sourced it for others to use. If you're this blocked then you should either choose a different module or go into the source code and fix it and then do a pull request to merge your fix into the project. Outside of that any time that l-lin puts in to help you is entirely optional and done out of the goodness of her heart.