Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: undefined is not a function at compileTemplate #1712

Closed
bastienJS opened this issue Oct 4, 2014 · 5 comments · Fixed by #1752
Closed

TypeError: undefined is not a function at compileTemplate #1712

bastienJS opened this issue Oct 4, 2014 · 5 comments · Fixed by #1752
Milestone

Comments

@bastienJS
Copy link

This is the error I get:

My environment is:

  • angularJS 1.2.16
  • angular-ui-router 0.2.10
  • ui-grid v3.0.0-rc.11-fda3ebb - 2014-10-04

In line 102 in the ui-grid.js is this code:

compiledElementFn($scope, function(clonedElement, scope) {
$elm.append(clonedElement);
});

At execution time the compiledElementFn is undefined.

Go to this plunker to see the behavior:

1.) http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

See this image in the plunker:

2.) [IMG]http://i.imgur.com/9hguTrn.png[/IMG]

Open the browser console:

3.) see this error:

TypeError: undefined is not a function
at compileTemplate (http://ui-grid.info/release/ui-grid-unstable.js:102:13)
at pre (http://ui-grid.info/release/ui-grid-unstable.js:109:14)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:53:156)
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:399)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:67
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:47:303
at u (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:51:28)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:196:394
at Object.fn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:105:244)
at h.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:106:311)

angular.js:9778
TypeError: undefined is not a function
at Object.s.preEval (http://ui-grid.info/release/ui-grid-unstable.js:8604:19)
at Grid.getQualifiedColField (http://ui-grid.info/release/ui-grid-unstable.js:3464:37)
at http://ui-grid.info/release/ui-grid-unstable.js:3447:81
at Array.forEach (native)
at Grid.preCompileCellTemplates (http://ui-grid.info/release/ui-grid-unstable.js:3446:18)
at http://ui-grid.info/release/ui-grid-unstable.js:3379:18
at u (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:97:280)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:98:417
at h.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:108:482)
at h.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:106:62)

The error occurs in every browser I know...

@PaulL1
Copy link
Contributor

PaulL1 commented Oct 5, 2014

I'm seeing a few things. One interesting thing is that your code runs very slowly, I'm not sure if this is contributing to some of the grid render methods running in a different sequence to what we might normally expect.

The first error that you have looks to be because your fields are numbers rather than strings, and one in particular is 0, which evaluates to false. So when code does if (col.field) the result is false. I think it's more the not string than the false, but both look problematic. I've added an error check into the code to require field to always be a string to avoid this problem. In your plunker I've changed the code to give the column a field of 'col' + i. Obviously this means the data won't be able to be retrieved, but it moves us past this error.

The second error is that the grid render is being called before the precompile. The trigger for this render might be out of the computedStyles watch, although it seems to move around a bit. Ultimately I suspect it's because the whole process is running very slowly, but the grid should be tolerant of that. I've done an error check (and a log message) if it's called out of sequence, but that doesn't solve the underlying problem.

I think it's perhaps possible to use logic similar to "queueRefresh" instead, so that we somehow notice that we're not ready to refresh yet, and queue it up for later. But not sure.

@PaulL1
Copy link
Contributor

PaulL1 commented Oct 5, 2014

Updated plunker with first problem fixed: http://plnkr.co/edit/xGmCuKrKhkWhqjQvTRfh?p=info

I can see the code sequence here is:

  • build columns called from addRowHeaderColumn
  • refreshCanvas called from styleComputations watch: doesn't cause issue
  • refreshCanvas called from modifyRows
  • errors written to console
  • precompileTemplates called after build columns promise

I have reduced the plunker to the minimum to show the problem, to make it easier to work with: http://plnkr.co/edit/ypGVBhxhZ4d5i9xCXbMs

The problem looks to me to relate to the cellTemplate being retrieved as html. When I replace the cellTemplate line with the template inline, the problem goes away.

I believe that the template retrieve is slowing down the initialisation process, and driving a different sequence of events in the render.

So, actions we can look at:

  1. Near term, you can replace your cellTemplate with an inline template. Not ideal, but it may get you past the problem
  2. Now that we have a cut-down plunker that reproduces the problem, we on the team need to discuss how to fix it.

My thought is that we need to sit down and document when and where we call refresh v's queueRefresh v's other things, and whether we can chain some of these into promises instead of relying on sequencing.

I'm not 100% on what it is that is triggering the initial render before the templates are compiled - whether it's the addRowHeader, or the modifyRows, or whether it's just a normal part of the grid initialisation, and it just normally happens in another order. So I'm not keen to make any decisions until the other guys weigh in.

@bastienJS
Copy link
Author

@PaulL1 about 1. The near term is ok for me but the long term needs a .html solution because I use the same html in a day and weekly view so I do not want to copy/paste at 2 places. Thanks for the team fix in a long term!

@PaulL1 PaulL1 added this to the 3.0 milestone Oct 6, 2014
@PaulL1
Copy link
Contributor

PaulL1 commented Oct 6, 2014

@c0bra, @swalters: making a high priority bug as it looks to me like a race condition on the render. If this is the case then we cannot predict when / to whom it would occur, and it would be a problem with wider usage. Something to discuss on the call this week perhaps.

c0bra added a commit that referenced this issue Oct 7, 2014
Issue #1712 demonstrates a race condition where a column's
compiledElementFn is attempted to be called before the cellTemplate is
present, e.g. in the case of a template fetched over the network. This
causes the function to not be present and an exception to be thrown.

This changes fixes this by added a getCompiledElementFn() method to
GridColumn, which returns a promise that is created in the
defaultColumnBuilder(). It gets resolved in
Grid.preCompileCellTemplates(). uiGridCell now uses this promise if the
function is not present at pre-link time.

Added tests for getCompiledElementFn() and getCellTemplate()

Fixes #1712
c0bra added a commit that referenced this issue Oct 7, 2014
Issue #1712 demonstrates a race condition where a column's
compiledElementFn is attempted to be called before the cellTemplate is
present, e.g. in the case of a template fetched over the network. This
causes the function to not be present and an exception to be thrown.

This changes fixes this by added a getCompiledElementFn() method to
GridColumn, which returns a promise that is created in the
defaultColumnBuilder(). It gets resolved in
Grid.preCompileCellTemplates(). uiGridCell now uses this promise if the
function is not present at pre-link time.

Added tests for getCompiledElementFn() and getCellTemplate()

Fixes #1712
@bastienJS
Copy link
Author

Thanks for fixing that one, looks fine so far and I am using lots of templates ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants