Uncaught ReferenceError: iframeLoad is not defined - javascript

I am trying to load an iframe function from html but I am getting an undefined on that function. I am getting a "Uncaught ReferenceError: iframeLoad is not defined". Am i missing something here?
<html>
<head>
</head>
<body onload="iframeLoad()">
<iframe id="accountroles" width="350px" height="300px"></iframe>
<script type="text/javascript">
function iframeLoad(){
var recordID = window.parent.Xrm.Page.data.entity.getId().replace(‘{‘, ”).replace(‘}’, ”).toLowerCase();
var url = "https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&source=website&appId=/providers/Microsoft.PowerApps/apps/xxxx-xxxx-xxxx-xxxx-xxxxx&da&accountID="+ recordID;
document.getElementById("accountroles").src = url;
}
</script>
</body>
</html>

Okay, that is probably due to your JS code containing syntax errors to begin with then - if the browser can’t parse the code properly, the function won’t be available at any time.
replace(‘{‘, ”).replace(‘}’, ”) - those “typographic” single quotes are wrong, you need to replace them with the correct ones, ' -04FS

Related

Using NodeJS, javascript in head can not use parameter from server

I'm making a page that receive string parameter from server when it is rendered. the parameter is shown correctly at body. but it shows "Uncaught ReferenceError: newestname is not defined" at jacascript function in part. but in part, the parameter is processed correctly and show it's data.
I think I'm missing quite basic thing to code. But I couldn't find while browsing internet for almost 4 hour. Please help me.
My js file in serverside give parameter like this.
res.render('index', { title: 'Express', newestname:newestname });
newestname is string value.
and at ejs file, it is processed at two part.
<head>
<script type='text/javascript'>
$(function() {
$('#report').load(newestname);
});
</script>
</head>
<body>
<div>
<%= newestname %>
</div>
<body>
the parameter using bodypart works correctly. But parameter at head doesn't work. the error message is like below.
Uncaught ReferenceError: newestname is not defined
I've tried using $(document).ready(function() {} but it shows same error.
How can I make parameter at header works?
You have to define the 'newestname' or you can directly pass '<%= newestname %>' to load function.
Try this.
<head>
<script type='text/javascript'>
let newestname= "<%= newestname %>";
$(function() {
$('#report').load(newestname);
});
</script>
</head>

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.

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.

Load a .svg to display with javascript in rails

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.

sammy.js get handler hiding errors

While using sammy.js library of versions 0.7.4 (also 0.7.1) it was found that if some error happens during execution of get handler function, nothing is printed to console.
For example in the following code snippet nothing will be printed to console though no function with name notExistingFunction exists:
<html>
<head>
...
<script src="/path/to/jquery-1.5.2.min.js"></script>
<script src="/path/to/sammy-0.7.4.min.js"></script>
...
</head>
<body>
<script>
$(document).ready(function() {
var sammy = Sammy(function() {
this.get('#someAnchor', function() {
// this function doesn't exist
notExistingFunction();
});
});
sammy.run();
// this should lead to execution of above handler
window.location.hash = '#someAnchor';
});
</script>
...
</body>
</html>
This really complicates troubleshooting of pages, did someone experienced this as well? Is this expected behavior or a bug? Are there any workarounds for this?
Thanks a lot in advance
Turned out to be easier than I thought - after inspecting sources of sammy.js it was found that somewhy raise_errors flag is set to false by default which manages error reporting.
So, modifying part above code to:
<html>
<head>...</head>
<body>
<script>
...
sammy.raise_errors = true;
sammy.run();
...
</script>
</body>
</html>
starts showing nice errors.

Categories

Resources