I have the following files loaded in sequence:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=try_to_initialize"></script>
<%= javascript_include_tag "application" %>
The application.js.erb referenced secondly has the following line of code:
function try_to_initialize() {
initialize_google_maps();
if (typeof initial_data !== 'undefined') {
google_maps_draw_data(initial_data, false);
}
}
The function is defined at the global space. It is not in any kind of event handler or local scope.
I checked the network tab to make sure the files are loaded in order:
js?v=3.exp&sensor=false&callback=try_to_initialize GET 200 script (index):30 (from cache) 6 ms
application-3332227d778ac1e4b9e987588145ff49.js GET 200 script (index):31 (from cache) 0 ms
Everything looks fine. Unfortunately, in the console I get the following error:
js?v=3.exp&sensor=false&callback=try_to_initialize:95 Uncaught InvalidValueError: try_to_initialize is not a function
I know what the error suggests. I just don't know why it is happening. Why can't it find the function?
Problem
The order of function definition matters in relatively small apps. If you have Google JS loader put first, then init, the script will block other resources from loading until it is fully loaded.
Test 1 (without async attribute)
The following example will throw an error from Google engine as an object with message:
init is not a function
function init(){
console.log('API loaded');
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>
Changing the order of <script> will fix the issue as init will be defined, and then browser fetches Google library.
<script>
function init(){
console.log('API loaded');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>
Test 2 (with async)
I have used async attribute in <script> to ensure it will not block the rest of resources from loading.
function init(){
console.log('API loaded');
}
<!-- the following script will act as block because of async attribute -->
<script async src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>
Related
What could've happened if I get the error msg ReferenceError: dragInit is not defined when I actually include the js file where dragInit is defined?
How can I resolve the error? Why is the function not known when it is included?
The inclusion looks like:
<script type="text/javascript" src="http://schema.medinet.dev//common/schema6.js?edb560209503a4f78bda807bc3217559"></script>
And then later in the page an inlined call generates the error message:
<script type="text/javascript" language="JavaScript">dragInit();</script>
The actual function in schema6.js look like:
function dragInit() {
document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
update();
}
Couple of things to check:
Check the script has loaded correctly - look for 404's in the network tab
Check the order in which scripts are loaded - is dragInit() available when it is called?
You can use most browser tools to debug the JavaScript as it is running. Take a look at MDN for details on how to do this.
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.
I am aware of the another question like this on stackoverflow and have looked at it, but it doesn't answer/resolve my situation that I'm having from which the error has occurred.
I'm trying to make both scripts, embed.js (plugin) & more-content-arrow.js (my script) work properly on the page when the document loads. When and if I remove either script, one or the other will work but not both scripts together. When the page finishes loading first, it will load the more-content-arrow.js properly, then when it is trigged again by a scrolling event, it will give off this error message in the console browser:
VM249 embed.js:2 Uncaught TypeError: ((fe.event.special[s.origType] || (intermediate value)).handle || s.handler).apply is not a function
at dispatch (VM249 embed.js:2)
at m.handle (VM249 embed.js:2)
I tried to resolve it by adding a jQuery.noConflict();, but that doesn't work as I assume it could be a conflict between the two scripts. The only way I found out to get rid of the error message is removing one of the two scripts file or removing $.getScript(...), but I don't want to do that. I want to be able to keep both scripts running properly in the page.
JS:
$(document).ready(function(){
//jQuery.noConflict();
$.getScript("more-content-arrow.js", function(){
alert("arrow script loaded and executed.");
});
});
I recreated a jsfiddle with the uncaught type error here:
https://jsfiddle.net/wr6cc2ct/2/
Your error appears it be in your more-content-arrow.js file, you were passing an integer as a third argument which is not a handler, here is the jquery doc for .on()
$(window).on('scroll', function () {
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}); // <--- removed integer here.
Update
Alternatively, you can use event.stopPropagation(); along with re-ordering the jquery.unevent.js script after the ember.js script.
$(window).on('scroll', function (e) {
e.stopPropagation();
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}, 800);
I'm using RequireJS 2.1.15, and I have trouble getting the errback that I pass to the library to be executed. Here is a small sample that illustrates my problem.
define("parent", ["missing"], function(){
return new Parent();
});
require(["parent"], function(parent){
alert("parent");
}, function(err){
alert("err");
});
(corresponding fiddle at : http://jsfiddle.net/605w0ex5/2/)
When I run this code, none of the success or error functions of the require() actually ends up called, but RequireJS prints a console message saying Error: Script error for: missing.
My problem here is that my require() call appears to be in limbo. It is neither successful nor failed even though one of the module it explicitly depends on will never ever be loaded. And the parent will never be loaded because a module is depends on cannot be loaded.
The problem is I DO want to be notified when my require() call cannot be satisfied. How can I get RequireJS to actually call my errback?*
I'm having this problem on Chrome 39 and RequireJS 2.1.15.
I'm ready to call it a bug in RequireJS because a) we get the expected behavior in FF and b) if we do the following, we also get the expected behavior.
What I did is take your code and create an HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<script>
require.config({
baseUrl: "js"
});
require(["parent"], function(parent){
alert("parent");
}, function(err){
console.log(err);
alert("err");
});
</script>
</body>
</html>
The js subdirectory contains RequireJS and a file named parent.js, which contains:
define(["missing"], function(){
function Parent () {}
return new Parent();
});
With this setup, the errback is called as expected. I can also add the name of the module to the define and it works with that too. But if the parent module is created like you did, then the errback is never called.
The other thing that makes me ready to call it a bug is that in one large application of mine I rely on errbacks for proper loading of modules. The application is tested in multiple versions of FF, IE, Chrome on multiple OSes and it works. (And I use it non-optimized and optimized with r.js.) The only thing I do not do that you code does is define a module outside of an individual file.
This is my code on the razor view engine
Delete
I have an external js file which contains the code for function detele:
alert('external');
function Delete(recordID, pID) {
alert('function called');
}
I added alert('external'); to check if I have the correct reference to the external js file, and it worked. Not sure why it keeps returning js error:
Microsoft JScript runtime error: 'Delete' is undefined