We Keep Coding

How to fix undefined error for document object in windows.onload?

Whenever I am running any react app the following piece of error pops out.
Uncaught TypeError: Cannot read property 'document' of undefined
at window.onload (content.js:5)
window.onload # content.js:5
load (async)
(anonymous) # content.js:1
Content in content.js is
window.onload=function()
{
//Create an object for the frame
var firstFrame = window.parent.frames[0].document;
//Set JQuery events to run in the context of the frame
$("#transliterateDiv", firstFrame).html("check");
chrome.storage.local.get('typeNepaliContents', function(result){
data = result;
});
}
The code doesn't disrupts the react workflow but still the error bothers me. What can be a quick fix for it?

JavaScript: $ is not a function (but it seems like it is)

I have a weird JavaScript problem that I just cannot understand.
My custom JavaScript file "header.js" uses jQuery. It throws the infamous "$ is not a function" error message but I don't understand why. The weird thing is I'm including jQuery.js and the code in question seems to have no problem to bind to jQuery events. So not having included jQuery is not the problem.
header.js
$(document).ready(function () {
if ($(document).width() >= 768) {
var header = false;
var scrollHandler = function () {
var scrollTop = $(window).scrollTop(); // line 5 that throws the error
// more code
};
//register function which is called on scroll
$(window).scroll(scrollHandler);
}
});
My HTML (with some debug output)
<script src="~/js/vendor/jquery.js"></script>
<script>
function printTest(str) {
console.log("test (" + str + "): " + $(".test").length);
}
</script>
<script>
printTest("2.1 before header");
</script>
<script src="~/js/header.js"></script>
<script>
printTest("2.2 after header");
</script>
Output when I load the page
test (2.1 before header): 1
test (2.2 after header): 1
But once I scroll my console error output shows:
TypeError: $ is not a function (line 5 in header.js)
Does anyone have an idea why that is? I've analyzed it for hours and I don't understand the reason. Any help/idea/suggestion would be highly appreciated. Thank you.

I possibly have a workaround. Its not the exact answer you seek. But can you check if putting the scroll handler's definition outside the document ready works for you ?
Please try as follows:
var scrollHandler = function() {
var scrollTop = $(window).scrollTop(); // line 5 that throws the error
// more code
};
$(document).ready(function() {
if ($(document).width() >= 768) {
var header = false;
//register function which is called on scroll
$(window).scroll(scrollHandler);
}
});
If this does not work too then there is something overriding your $ definition. Can you tell us if this works in your code ?

Ok, so if you have the same problem here is how I solved it.
The problem was a conflict with require.js. Require.js comes automatically with a module in Sitecore. At first I was not aware that require.js was causing this conflict because when I checked the JavaScript file I was looking for some override of $. What I didn't know at this point was that require.js also has a configuration file that includes its own version of jQuery.
I solved it by removing require.js (and adding the dependencies that it brought manually to my page).

KnockoutJS: Cannot read property 'fromJS' of undefined

I use KnockoutJS in my app. Today I've got an error Uncaught TypeError: Cannot read property 'fromJS' of undefined in browser console and page doesn't load, although I'm loading Knockout plugin and recently everything worked fine.
plugins from head
<script src="/assets/my/libs/knockout-2.1.0.js?body=1" type="text/javascript"></script>
<script src="/assets/my/libs/knockout.mapping.js?body=1" type="text/javascript"></script>
my javascript file
var IllustratorModel = function (data) {
var self = this;
window.komodel = this;
this.pre_offerings = ko.mapping.fromJS(data);
....
Thanks!

I faced the exact same problem today.. and it ended up that knockout-{version}.js was referenced twice.

Function is not defined though js file reference is in header

I am working on a page on a website (see http://www.quick-conversions.com/currency).
I am attaching a onkeyup="doConversion('...') on each input field. The corresponding function is defined in a javascript file available at: http://www.quick-conversions.com/sites/MyScripts/PHP/currency.js
In the source page, this file seems to be imported properly in the header:
<script type="text/javascript"
src="http://www.quick-conversions.com/sites/MyScripts/PHP/currency.js?m4xpzi"></script>
But the function is not fired and Firebug says that it is not defined? I am running out of ideas to solve this issue. Anyone has an idea of what is happening? Thanks.

Loading the page I get:
Uncaught SyntaxError: Unexpected token (
currency.js line 104
That is likely the cause.
You have:
var updateConversion(src_rate, value) {
Which should be either:
function updateConversion(src_rate, value) {
or
var updateConversion = function (src_rate, value) {

There's error on your source files.
missing ; before statement
[Break On This Error]
var updateConversion(src_rate, value) {
curren...?m4xpzi (line 104, col 20)

cannot get simple appendChild function working

I am testing javascript code on W3schools' site and I cannot get the appendChild function working.
Hope its not a dumb error.
here it is:
<script type="text/javascript">
function append()
{
var node = document.getElementById(“history”);
node.appendChild(document.createTextNode("text"));
}
window.onload = append;
</script>
<div id="history"></div>

You don't have proper double quotes (I don't know what the others are called):
document.getElementById(“history”);
// ^ ^
This throws the error:
Uncaught SyntaxError: Unexpected token ILLEGAL
It works with:
document.getElementById("history");
DEMO
OT: w3schools is not a good resource for learning (http://w3fools.com/). Better have a look at the Mozilla documentation: https://developer.mozilla.org/en/javascript