Javascript Error Message: is not a function

This error message appears when you use Varibalized Function (or called Function Literal, Function Reference, Function Pointer) method to declare function while you did not put into right order:

(Caller here)
; var func = function()
{
...
}

Solution 1:

; var func
(Caller here)
; func = function()
{
...
}

Solution 2:

(Caller here)
; function func()
{
...
}


http://www.dustindiaz.com/javascript-function-declaration-ambiguity/
Function Declaration in JavaScript

Function Declaration in JavaScript

It is easy to declare a function in JavaScript. And everyone knows it:

Standard or Procedural Function

; function func()
{
...
}

The problem of it is this function cannot be passed as parameter in another function. To be able to do that, you will need to varibalize it:

Varibalized Function, or Function Literal, Function Reference, Function Pointer

; var func = function()
{
...
}

Everyone does that too. Wait a moment. This form for declaration indeed is just set to fail if you use it carelessly. You may get following error massage when sequence to execute programming block becoming sensitive, such as work with setTimeout() and setInvertal() or inside of a function:

[This function] is not defined.

If you include this form of function with setInterval or setTimeout, you may get error message:

useless setInterval call (missing quotes around argument?)

This is because you will need to put it in right sequence to make sure the memory has load the function first.

So, it is suggested in general you should use orthodox function declaration method. If you use variablized function declaration method, please make sure it has been put into right place in the sequence of programming blocks.

Have a look at following case:

; var func = func()

; function func()
{
...
}

No, this is not a function declaration method for first statement. It just get the return value from the function func().

Apart from above mentioned popular method, here is

Function Object

; var func = new Function()
{
...
}

It is not recommended to use because it would take longer time to process, unless for special purpose, such as reconstruct to function from variablized function and variablized parameters. For instance:

; var reconstructedVar = new Function([para1, para2,...paran], functionBody)
{
...
}

Please take note, all parameters and function body must be in string or reference. The other way to reconstruct the function is to do it by yourself. For details, please see Passing Function in JavaScript.


http://www.permadi.com/tutorial/jsFunc/index.html
http://www.hunlock.com/blogs/Functional_Javascript
http://www.dustindiaz.com/javascript-function-declaration-ambiguity/
http://osdir.com/ml/jQuery/2009-11/msg01942.html
Javascript Error Message: is not a function

Passing Function in JavaScript

To pass function like a reference, one needs first to make the function a variable reference:

; var funcationName = function(argu) { ... }

Then, it can be passed:

; function anotherFunc(passingFunc)
{
; passingFunc(para)
}

Use it just like the function itself. Indeed, if there is no parameter for functionName(), you will still need to use it as function:

; function anotherFunc(passingFunc)
{
; passingFunc()
}

Function passing even can be used to across the html pages, just like variable reference passing:

; function anotherFunc(passingFunc)
{
; parent.passingFunc()
}

In HTML, following syntax is used to invoke the function:

onkeypress="anotherFunc(funcationName)"

It is very important, the sign of () could NOT be put in invokin statement in HTML, something like:

onkeypress="anotherFunc(funcationName())"

Now, this syntax does create confusion when you want to pass the parameter as will, for instance, you want to call anotherFunc(funcationName(argu)). The ways to overcome it is:

1. For static passing function with dynamic passing varialbe: Declare argu as global variable. Codes are as follows:

; var para

; var funcationName = function(argu) { ... }

; function anotherFunc(passingFunc)
{
; passingFunc(para)
}

onkeypress="para=something;anotherFunc(funcationName)"

3. If you want a complete dynamic passing function together with a dynamic passing variable, you will need to create third function:

; var para

; var funcationName = function(argu) { ... }

; var thirdFunc = function()
{
...
; funcationName(para)
...
}

; function anotherFunc(passingFunc)
{
; passingFunc()
}

onkeypress="para=something;anotherFunc(thirdFunc)"

Function thirdFunc() indeed is where you should play with.

Another approach is to write a function to reconstruct the function from variables:

; function reconstructFunc(func, totalPara, para1, para2, para3)
{
; var newFunc
; if (0==totalPara) newFunc = func
else if (1==totalPara)
{
; newFunc = function()
{
; func(para1)
}
}
else if (2==totalPara)
{
; newFunc = function()
{
; func(para1, para2)
}
}
else
{
; newFunc = function()
{
; func(para1, para2, para3)
}
}
; return newFunc
}

It is very important when passing function, the function must be properly declared. Please refer to http://koncordpartners.blogspot.com/2010/04/function-declaration-in-javascript.html. This article also covers another method to reconstruct the function from variablized function and parameters.

If the function reference/literal had passed across HTML pages, in IE 8 it might general error as "Function expected". To overcome this, you need to set up a local variablized function to call access remote function.

Code Conventions: JavaScript

Organizing

There can be six major parts:

1. Passing Variable Register: This is to register any variable across the HTML files. Do not use crossing file variable directly in body of JavaScript, instead declare here. For instance:

; var localVar = parent.superVar

2. Passing Function Register: To register the functions calling other functions located in different HTML file. Do not call crossing file function directly in body of JavaScript, instead declare here. For instance:

; function closeProcess()
{
; parent.closing()
}

Put Passing Variable Register and Passing Function Register at top of JavaScript file to enable easier updating during coding phrase.

3. Local Global Variable Declaration.

4. Event Functions: Include all event functions here, such as onload, etc.

5. HTML Action Functions: If the function is called by HTML file, initialized by the user, it should be included here.

6. Internally Called Functions: Functions called by event functions or action functions.

End of Statement

JavaScript allows the developer to decide whether or not to end a line with a semicolon. If the semicolon is not provided, JavaScript considers the end of the line as the end of the statement. It is suggested to use semicolon instead of nature line break. Furthermore, you can indeed use semicolon in front of each statement, not only emphasis the line break, but also to increase visual impact on the indentation. All examples in this post are in this format.

Comments

It is suggested to use closed comments tag as much as possible: <!-- -->. By doing this, it would be relatively easier to keep coding parts clearer. In addition, if you are using PHP Wrapping JavaScript Debugging Method, as introduced here:
http://koncordpartners.blogspot.com/2010/04/how-to-enforce-download-of-javascript.html, it is essential to use the closed comments.

DHTML

Use + to concatenate every line of HTML codes, such as:

; var htmlBody = ''
+ ' <table> ...
+ ' <tr> ...

Whitespace within string serves no purpose for HTML. However, it can make visual alignment for coding purpose.

Function Declaration

Always use most orthdox variablized function declaration:

; funcation func()
{
...
}

Avoid to use variablized function declaration like var func = function() {...}, unless it is necessary. If you do use variablized function declaration, make sure it had been placed before the caller. For details please see http://koncordpartners.blogspot.com/2010/04/function-declaration-in-javascript.html.

Form With PHP Behind

Use '' instead of null. Accordingly, the PHP end should be:

if (0!=strlen(trim(@$_POST["theInputItem"]))) {...};

When use function to assign value to form, string parameter would need to be assigned with '' in consideration of it might be null or undefined:

; document.theForm.theInputItem.value = (parameter) ? parameter : ''

For details, please refer to http://koncordpartners.blogspot.com/2010/04/trouble-with-internet-explorer.html.


http://javascript.crockford.com/code.html