Uncaught ReferenceError: onOpenCvReady is not defined - javascript

I tried openCVjs tutorial in my local and everytime I load it I get error on console
What I have tried ?
Loading without a file server, because the openCV.js library is around 11mb. So thought that could be an issue.
Loaded with simpleHTTPserver using python even then I got the same error. Attached below screenshot of the network requests.
Please note that test.js resides in the same path as that of openCV.js but test.js works because I tried console.log from it.

You should load opencv.js asynchronously.
Add this into your index.html
<script>
function onOpenCvReady() {
console.log( 'OpenCV Ready', cv);
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript">
</script>

In my case, it only works when the onOpenCvReady() function is declarated in an HTML page.
When the function is loaded from an external test.js file, I have to refresh the index page two times, then it suddenly works without any errors.
I embedded it into my HTML page like this:
<p id="status">OpenCV.js is loading...</p>
<!-- <script async src="js/main.js" type="text/javascript"></script> -->
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script>
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

Related

run internal script after external script has been loaded via defer

It is well known to everyone that using defer is an efficient way to minimize the loading time of a website.
In my project, I am using Vue (included in the header using defer) and in a circumstance, I want to use a component that is created by another person. When I try to do Vue.Component(...) in the body of the HTML, it says Vue is undefined. It seems that my script in the body is running before the external script has been loaded. Is there any way to fix this issue?
I tried to do document.onload, but the function itself is not working.
PS: Just to be clear, the external script is referring to my js file where Vue is defined and I am not talking about the third party library at all.
Instead of document.onload you need to use window.onload or document.body.onload.
But an even better way is to wait for the load event on <script> tag:
<html>
<head>
<script id="vue-script" src="vue.js" charset="utf-8" defer></script>
</head>
<body>
<script type="text/javascript">
function onVueLoaded() {
Vue.render();
}
if ('Vue' in window) {
onVueLoaded();
} else {
var script = document.getElementById('vue-script');
script.addEventListener('load', onVueLoaded);
script.addEventListener('error', () => console.warn('failed to load Vue.js'));
}
</script>
</body>
</html>
Here I also added a handler for the error event if you wanted to explicitly handle loading errors.

kongregate not defined error javascript

I have included the required files in the head as it says in the docs
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
And then right above my scripts i included the script that supposed to define the variable
<script>
kongregateAPI.loadAPI(function(){
window.kongregate = kongregateAPI.getAPI();
});
</script>
But in the console I am still getting this error
Uncaught ReferenceError: kongregate is not defined
You said:
And then right above my scripts i included
Does it mean that your code looks like this?
<script>
kongregateAPI.loadAPI(function(){
window.kongregate = kongregateAPI.getAPI();
});
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
If so, you should call kongregateAPI functions after you loaded api js file:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
<script>
kongregateAPI.loadAPI(function(){
window.kongregate = kongregateAPI.getAPI();
});
</script>
I've tried it, everything works fine.

Access a Function From Another File

I have two file:
html2canvas.js
function html2canvas(){
}
myid_print.js
(function ($) {
$(document).ready(function() {
//I want to call html2canvas function here
html2canvas();
});
})(jQuery);
I already included both files in my html but after running the code above, the console shows an error saying:
Uncaught ReferenceError: html2canvas is not defined
How will I call the function from inside my second file?
Try implementing your Client side code as :
<head>
....
<script src="html2canvas.js" type="text/javascript"></script>
<script src="myid_print.js" type="text/javascript"></script>
....
<head>
<body>
...
<script type="text/javascript">
function_from_myid_print();
</script>
...
</body>
Inside which you can call html2canvas();
This will surely help you.
For more details refer links:
https://stackoverflow.com/a/3809896/4763053 and https://stackoverflow.com/a/25963012/4763053
Try put your JS script at the bottom of your HTML page.

Require.js#require failing locally (file:///)

Given the following document, Require.js functions fine if I run it on a webserver but fails if I open the same document locally (file:///).
I'll see 'called' printed to the console when I open the document locally (thus callback fired w/o issue) but:
There is no request listed in Firebug's/Chrome's network tab.
The variables in common.js aren't defined and none of the console.log statements run.
Require.js is NOT requesting the common.js file when the document is loaded from my desktop.
<html>
<head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/<MYBUCKET>/scripts/require.min.js"></script>
<script>
require.config({
baseURL: 'https://s3.amazonaws.com/<MYBUCKET>'
});
require(['scripts/common'], function(){
console.log('called')
});
</script>
</body>
</html>
Given that baseurl states the http/s protocal, I don't understand why this is failing when the document is located on my desktop and works fine when the document is located at http://whatever.com.
Secondary/related:
Ideally I'd like to omit the protocals and allow the browser to handle that itself but this of course also fails completely locally.
(same code as above, sans http/https)
<html>
<head></head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//s3.amazonaws.com/<MYBUCKET>/scripts/require.min.js"></script>
<script>
require.config({
baseURL: '//s3.amazonaws.com/<MYBUCKET>'
});
require(['scripts/common'], function(){
console.log('called')
});
</script>
</body>
</html>
This probably has nothing to do with Require.js and everything to do with how browsers handle requests from file:
Is there a sensible way to make this work regardless of the document's location?
It's baseUrl, with only the U in capitals. You're using baseURL which is ignored.

Head.js weird action

I'm trying to use head.js. Getting some weird action. Below works but if I comment out "alert('hi')" in the script in the BODY, then the head.js doesn't seem to work.
So I tried commenting out all the head.js stuff and used a standard tag for each JS library. And it works as expected. But when using Head.js, it fails if the "alert('hi')" is commented out. Obviously, for production, I want to remove this alert but then I get this error message: "ReferenceError: $ is not defined" ... ??? But if I uncomment out the alert, then it all works and pulls data from the DB ???
Any thoughts?
<head>
<title></title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js">
</script>
<script type="text/javascript">
head.js(
/* root level */
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
"/assets/scripts/external/_references.js",
"../../assets/scripts/external/jquery.unobtrusive-ajax.min.js",
"../../assets/scripts/external/jquery.validate-vsdoc.js",
"../../assets/scripts/external/jquery.validate.min.js",
"../../assets/scripts/external/jquery.validate.unobtrusive.min.js",
"../../assets/scripts/external/knockout-2.3.0.js",
"../../assets/scripts/external/modernizr-2.6.2.js",
"/assets/css/Index.css",
"assets/css/OrangeCounty.css"
);
</script>
</head>
<body>
<div id="list"></div>
<script>
alert('hi');
$.getJSON("http://localhost/webapi/api/ccc", function (result) {
$.each(result, function (i, field) {
$("div").append(field.Code + " " + field.Country1 + "<br/>");
});
});
</script>
</body>
The alert() stalls the script execution enough for jQuery to actually load. Head.js loads the scripts in parallel and doesn't block, so you have to use it with a callback:
head.js(..., function() {
// Your code
});
Or put that code into a separate script file and put it after jQuery in your head.js call.

Categories

Resources