Develop Reference

How do I fix "Uncaught TypeError: $(".flexNav").flexNav() is not a function?

I'm getting the "Uncaught TypeError" in a custom file that's initializing flexNav with this object:
function setupFlexnav() {
// flexnav setup and options
//var isIE = false || !!document.documentMode;
//if (!isIE) {
$(".flexnav").flexNav({
'animationSpeed': 0,
'transitionOpacity': false,
'buttonSelector': '.menu-button',
'hoverIntent': true,
'hoverIntentTimeout': 100,
'calcItemWidths': false,
'hover': true
});
//}
//other custom code follows, but error is thrown on $(".flexnav").flexNav
}
//initialize flexnav
$document.ready(function () {
setupFlexnav();
});
The 'setupFlexNav()' method is called elsewhere in this file, and is wrapped up in $document.ready() {...}, which should stop flexNav() from being called until jQuery has been loaded.
BundleConfig is loading jQuery-1.10.2.js before my jquery.flexnav-custom.js script, but is loading a jQuery-1.11.3.js file after these 2 files.
I would wonder if loading 2 versions of jQuery on the same page would cause the "Uncaught TypeError" to be thrown, but this code has been unchanged for 6 months in Source Control. I haven't been getting this flexNav() error until today, so something else must be causing the error besides the initialization of flexnav. I just don't know that something is. What would cause my given code to start throwing this error? THANKS!

After looking over my code one more time, I realized that the order of my scripts was indeed causing the issue. The old version of jQuery (1.10.2) loaded before jquery.flexnav-custom.js, which is fine, but the new version (1.11.3) loaded after these scripts. I omitted the older file, loaded the newer file before the flexnav script, and rebuilt the project. The error went away.

Uncaught TypeError: $(...). is not a function... flagged after upgrade to PHP7.0

I upgraded my test server environment from PHP 5.x to 7.0. This has resulted in quite a few changes to the base code (mysql --> mysqli, etc), but this error has me running in circles. I am using the stock slimbox2 lightbox jQuery alternative. After the upgraded PHP modules, and dsorted out most of the issues, the slimbox no longer worked, and flagged with this error:
Uncaught TypeError: $(...).slimbox is not a function
If I drill down a bit, the following is the location the error is coming from (straight from slimbox2.js.. v2.05):
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
Other posts seems to circle in on this error being a conflict between JQuery / Prototype / etc.
The function is defined in slimbox2.js and they all appear to be wrapped in JQuery to ensure the right bits are being pulled.
Thanks for any ideas of help you can provide!

Turns out the issue was buried somewhere in a package that was not properly installed. I unloaded the webserver and php packages and put them back again, resoling the issue.

dojo updated causes strange errors

I recently updated my project to dojo version 1.6.2 from 1.6.1 now I keep getting strange errors without any code changed.
Chrome error console:
Error parsing in _ContentSetter#Setter_DIV_0
/etermin/js/dojo-release-1.6.2/dojo/../dijit/layout/ContentPane.js:203
Error undefined running custom onLoad code: This deferred has already been resolved
/etermin/js/dojo-release-1.6.2/dojo/../dijit/layout/ContentPane.js:142
Firefox error console:
dojo.js (vrstica 324)
Error parsing in _ContentSetter#Setter_DIV_0
Error: Could not load class 'dijit.form.FileringSelect
dojo.js (vrstica 372)
Error undefined running custom onLoad code: This deferred has already been resolved
There is a problem in the dojo.js file: If I change it back to 1.6.1 it makes things work. But I want to use 1.6.2 version
Plaease help and advise
UPDATE:
Something strange that I've found:
var p = new dijit.MenuItem({
label: "cut",
})
p.onClick = function() {
dojo.xhrGet({
//some ajax call
});
}
Doesn't work. But if I put just one simple alert before the ajax it works.
p.onClick = function() {
alert("123");
dojo.xhrGet({
//some ajax call
});
}

Why don't you update your Version to 1.9? Sooner or later the legacy dojo won't work anymore and in the Google Hosted librarys i found no Version 1.6.2
Have a look:
https://developers.google.com/speed/libraries/devguide
Is it still available? Where do you get the dojo.js from?
To prevent the timing Issue of the Menu, you can define the onClick when you
define your MenuItem.
Have a look :
var p = new dijit.MenuItem({
label: "Menu Item With an icon",
iconClass: "dijitEditorIcon dijitEditorIconCut",
onClick: function(){alert('i was clicked')}
}));
Regards, Miriam

This is reported as a bug.
Look here for the bug report..
You have to patch your dojo version or Upgrade it to 1.8 or later to fix it.
If you know what you are playing with you can fix it manually.
The patch is on here.
You can manually apply this to your current dojo build to fix it.

Console is undefined error in IE9

I have a graphics page which shows SVG graphics. I am using Raphael graphics framework. The page displays properly in Firefox, Also if the F12 developer tools is set 'on' in IE9 it works fine.
The map show partial data (its a node link diagram and it shows only one child node out of 12 nodes) in IE9 if the F12 developer mode is set off and application is started with browser cache cleared (simulating a general user).
Update: I kept the Debugger on and Shows me the error "Console is undefined". So I think its not a graphics rendering issue, and also I am not using the console explicitly, maybe the mindmap js is using it internally, but how to again get rid of this issue?
Update:
I found the issue and commented out the console.log entries from the js files.
Thanks.

Probably your code or the code you are calling is using console.log or something like it.
You could add this code in the global scope to create a dummy wrapper for IE (or any browser that doesn't support it). Just put the following code somewhere before you call any other libraries:
if(!(window.console && console.log)) {
console = {
log: function(){},
debug: function(){},
info: function(){},
warn: function(){},
error: function(){}
};
}

The problem is that your js code calls sometime a console method, for example 'console.log', but your browser does not have console (or has it closed);
To fix this, add this (once) before including any of your scripts:
//Ensures there will be no 'console is undefined' errors
window.console = window.console || (function(){
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
This will create a 'pseudo' console only if it doesn't exist, so that 'console is undefined' error will go away.
Hope this helps.
Cheers

Do you have a console.log() or console.error() call in your code?

Javascript: Error 'Object Required'. I can't decipher it. Can you?

I am using a javascript called 'Facelift 1.2' in one of my websites and while the script works in Safari 3, 4b and Opera, OmniWeb and Firefox it does not in any IE version.
But even in the working browser i get the following error I cannot decipher.
Maybe in due time—with more experience in things Javascript—I will be able to but for now I thought I would ask some of you, here at SO.
The following is the error popup i get in IETester testing the page for Interet Explorer 6,7 and 8:
The following is from the Firebug console in Firefox 3.0.6:
The website is: http://www.457cc.co.nz/index.php In case it helps you see the problem mentioned in action.
I have also looked up what line 620 corresponds to which is:
"line 76" is:
this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');
which is part of this block of code (taken from the flir.js):
// either (options Object, fstyle FLIRStyle Object) or (fstyle FLIRStyle Object)
,init: function(options, fstyle) { // or options for flir style
if(this.isFStyle(options)) { // (fstyle FLIRStyle Object)
this.defaultStyle = options;
}else { // [options Object, fstyle FLIRStyle Object]
if(typeof options != 'undefined')
this.loadOptions(options);
if(typeof fstyle == 'undefined') {
this.defaultStyle = new FLIRStyle();
}else {
if(this.isFStyle(fstyle))
this.defaultStyle = fstyle;
else
this.defaultStyle = new FLIRStyle(fstyle);
}
}
this.calcDPI();
if(this.options.findEmbededFonts)
this.discoverEmbededFonts();
this.isIE = (navigator.userAgent.toLowerCase().indexOf('msie')>-1 && navigator.userAgent.toLowerCase().indexOf('opera')<0);
this.isCraptastic = (typeof document.body.style.maxHeight=='undefined');
if(this.isIE) {
this.flirIERepObj = [];
this.flirIEHovEls = [];
this.flirIEHovStyles = [];
}
}
The whole script is also available on my server: http://www.457cc.co.nz/facelift-1.2/flir.js
I just don't know where to start looking for the error, especially since it only affects IE but works in the rest. Maybe you guys have an idea. I would love to hear them.
Thanks for reading.
Jannis
PS: This is what Opera's error console reports:
JavaScript - http://www.457cc.co.nz/index.php
Inline script thread
Error:
name: TypeError
message: Statement on line 620: Cannot convert undefined or null to Object
Backtrace:
Line 620 of linked script http://www.457cc.co.nz/facelift-1.2/flir.js
document.body.appendChild(test);
Line 70 of linked script http://www.457cc.co.nz/facelift-1.2/flir.js
this.calcDPI();
Line 2 of inline#1 script in http://www.457cc.co.nz/index.php
FLIR.init();
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

I agree with tvanfosson - the reason you're getting that error is quite likely because you're calling init() before the page is done loading, so document.body is not yet defined.
In the page you linked, you should move the following code to the bottom of the page (just before the closing html tag:
<script type="text/javascript">
FLIR.init({ path: 'http://www.457cc.co.nz/facelift-1.2/' });
FLIR.auto();
</script>
Even better, you should attach the initialization to the document's ready event. If you do it this way, there is no need to even move your javascript to the bottom of the file. Using jquery:
$(document).ready( function(){
FLIR.init({ path: 'http://www.457cc.co.nz/facelift-1.2/' });
FLIR.auto();
});
More on jquery's document.ready event »

Edit Answer left for context. See #Triptych's (accepted) answer for the correct resolution.
My suggestion is to move the inclusion of the javascript to the end of your mark up. I think what is happening is that the code is executing before the DOM is completely loaded and thus the document.body is null when you try to reference it in determining the maxHeight style property. Moving the inclusion of the javascript to the end of your markup should be enough to guarantee that the body of the document is loaded at least and avoid this particular error.
... rest of html....
<script type='text/javascript'
src='http://www.457cc.co.nz/facelift/flir.js'>
</script>
</body>
</html>

Install .net Framework v2 and solve the problem.