Load a .svg to display with javascript in rails - javascript

I'm trying to use kartograph.js to display a svg map located in /public in a rails application and cannot figure out how to load the map. Here's my .js.coffee.erb file:
$ ->
map = $K.map('#map')
# map.loadMap("#{Rails.root}/public/Blank_US_Map.svg", loaded) # attempt 1
map.loadMap("Blank_US_Map.svg", loaded) # attempt 2
loaded = () ->
map.addLayer('baseLayer')
The error thrown in the console is Uncaught TypeError: Cannot call method 'getAttribute' of undefined, though I believe the problem is that no file is being loaded.

The issue comes from the library you're using, Kartograph. It needs a SVG file with absolute coordinate, or you'll most likely get this error.
You can confirm that by trying a pure-HTML-and-js version, e.g. :
<html>
<head>
<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="kartograph.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
$(document).ready(function() {
var map = kartograph.map('#map');
function callback(mymap) {
// Stuff
}
map.loadMap('Blank_US_Map.svg', callback);
})
</script>
And see if you get the same error.

Related

Broken script when added to headers in WordPress

I write a WordPress Plugin which provides adding scripts to header. When I try to add code snippets of our service
<script src="url/index.js"></script>
<script>
var foo = new window.Name("token");
foo.init();
</script>
to head, I got some errors.
Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
at r.<anonymous> (index.js:176)
at L (index.js:47)
at Generator._invoke (index.js:47)
at Generator.t.(:8000/anonymous function) [as next] (url/index.js:47:4580)
at r (index.js:174)
at c (index.js:174)
at index.js:174
at new Promise (<anonymous>)
at new r (index.js:36)
at r.<anonymous> (index.js:174)
and
Uncaught TypeError: Cannot read property 'appendChild' of null
at i.value (index.js:178)
at r.value (index.js:180)
at (index):41
.
The url returns our script code which is rendered by Babel.
When I add any standard html code like <html></html> or <p></p> before the script,
<p></p>
<script src="url/index.js"></script>
<script>
var foo = new window.Name("token");
foo.init();
</script>
it works clearly. What about any html code? I can't understand. I solve it by adding <html></html> without broken website. I try to learn problem.
It's hard to tell without seeing what's in your url/index.js file, but it's probably trying to append a node to the <body> element, or a child of it before it exists. It will not exist yet if you are calling this script in the <head> section.
The reason the <p></p> fixes it is that if the browser receives the following:
<head>
<script>
console.log(document.body);
</script>
</head>
It sees it is invalid HTML, and so it re-interpreted as:
<html>
<head>
<script>
console.log(document.body);
</script>
</head>
<body></body>
</html>
- the body does not exist by the time the script is run, so the console logs null.
If the browser receives:
<p>Paragraph</p>
<head>
<script>
console.log(document.body);
</script>
</head>
...it is again invalid HTML, and is re-interpreted as
<html>
<head></head>
<body>
<p>Paragraph</p>
<script>
console.log(document.body);
</script>
</body>
</html>
...and the body element exists when the script runs, so it will log the body element to the console.
In summary: You need to make sure all of your HTML is valid, and that your script only tries to append something to an element which already exists.

Problems loading Google Maps API callback script in Webpack bundle

I have a function initMap() that is supposed to be called when the Google Maps API has finished loading. This function manages all of the settings for the map I use in my web-app.
initMap() lives in a file called init-map.js.
I'm migrating to Webpack, so init-map.js is now being included in index.js using require('./scripts/init-map.js.
I'm getting an error InvalidValueError: initMap is not a function, but when I load init-map.js using its own <script> tag, I don't get the error.
Causes error:
<html>
<head>
...
<script src="bundle.js"></script> <!-- init-map.js is required in this file -->
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
Works without issue:
<html>
<head>
...
<script src="bundle.js"></script>
<script src="./scripts/init-map.js"></script>
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
I don't understand how to make initMap() available for the Google Maps API when it makes the callback.
I would also prefer to have the init-map.js managed within index.js.
I believe this is because the bundler changes the name of your initMap function to something like a single letter, e.g. e or f.
Please check your calling part. Is it throwing 404 errors? on inspect element -> Network
Try using from "./scripts/init-map.js" to "/scripts/init-map.js" or "scripts/init-map.js"

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.

jQuery $ is not a function

I have a problem including a jQuery script in my webpage. I always get the error "$ is not a function" in line 6. I reduced my script to the following very simple one:
$(document).ready(function(){
myTest();
});
function myTest(){
window.console && console.log($("#test"));
}
Why is there an error in line 6? Why not already in line 1?
You have not included jquery.js in your page, or the path you have used is incorrect. Here is an example one using Google's CDN:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// your code here...
</script>
</head>
</html>
The line numbers given in browser error messages are notoriously unreliable, always use the actual error message as a guide to the problem.
Hi Please download and include jquery.js or jquery.min.js
in script tag
Give jquery.js path in script src attribute
This error message means that jQuery is not included

JQuery - cannot read property 'Editor' of undefined

I'm trying several WYSIWYG HTML5/JQuery editors. However, with both Bootstrap WISWYG and Summernote, I get 'cannot read property 'fn' of undefined' or 'cannot read property 'Editor' of undefined. I'm just using the standard files out there on GitHub. Anyone familiar with these errors using JQuery plugins?
EDIT
I'm now trying Bootstrap WISWYG
Within my body I have
<div id="editor">Editor</div>
In my js, I have
$(document).ready(function() {
$('#editor').wysihtml5();
});
However, the error I get is:
Cannot read property 'Editor' of undefined (line 157)
Line 157:
var editor = new wysi.Editor(this.el[0], options);
JSFiddle: http://jsfiddle.net/MgcDU/8125/
EDIT 2
I forgot to include one JS file. However, after including it I get a new error:
Uncaught TypeError: Cannot read property 'firstChild' of undefined
The lines of code that the error refers to:
if (isString) {
element = wysihtml5.dom.getAsDom(elementOrHtml, context);
} else {
element = elementOrHtml;
}
while (element.firstChild) <<<Error
The thing is you are using a DIV element instead of a textarea there are also dependencies missing. Checking the Bootstrap WYSIHTML5 page it says:
Dependencies:
bootstrap-wysihtml5.js
bootstrap-wysihtml5.css
wysihtml5
Twitter Bootstrap
Then your document should look something like:
<!DOCTYPE html>
<header>
<title>HTML5 Editor</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Of course place sources in your own server, do not leech bandwidth -->
<script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/src/bootstrap-wysihtml5.css">
</header>
<body>
<textarea class="editor"></textarea>
<script type="text/javascript">
$(document).ready(function(){
$('.editor').wysihtml5();
});
</script>
</body>
For further reference, please check: Wysihtml5 #Usage
"cannot read property 'fn' of undefined"
usually means that the script does not have script being loaded into DOM. You might are missing jQuery file? I have often noticed that it is becoming a practice for jQuery scripts to be loaded right in the bottom of HTML, right before
</body>
But, it always works so well if I loaded only one Jquery file in header meanwhile the rest of other jquery plugin scripts loaded in the bottom of the html file.

Categories

Resources