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.
Related
I found this script on an earlier post. I was trying to get this to work but I am not sure why it is not working.
$(function() {
var iframes = $('iframe');
var i = 0;
(function next() {
var iframe = iframes.eq(i++);
if (iframe.length) {
iframe.attr('src', iframe.data('src')).load(next);
}
})();
});
I get the error:
jQuery.Deferred exception: url.indexOf is not a function", "TypeError: url.indexOf is not a function
at jQuery.fn.init.jQuery.fn.load (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js:10091:13)
at next (https://fiddle.jshell.net/_display/?editor_console=true:119:54)
at HTMLDocument.<anonymous> (https://fiddle.jshell.net/_display/?editor_console=true:121:9)
at mightThrow (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js:3557:29)
at process (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js:3625:12)", undefined
Here is the original post and the idea I would like to implement. Any help would be appreciated. I am new to jquery and unable to decipher what the real issue is.
https://jsfiddle.net/1jo83tav/
I guess is this problem that $ is a JQuery variable, add a CDN to your html or something.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I am trying to initialize a MapboxDraw object with the following JS code:
var graphicsController = MapboxDraw(); // Initialize the graphics controller
I am importing mapbox-gl-draw w/ the following CDN:
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
However I get the following error message:
Uncaught TypeError: Cannot set property 'modes' of undefined
(mapbox-gl-draw.js:1)
What does this mean? Is it some bug of mapbox-gl-draw that I can just ignore or do I need to do anything to fix it?
MapboxDraw is a constructor, so you need to initialize it with new keyword:
var graphicsController = new MapboxDraw();
Imagine the following dataset:
{"FakeEconomy":{
"2016-04-05":5651694,
"2016-04-06":5513759,
"2016-04-07":5410169,
"2016-04-08":5094142,
"2016-04-09":4768829,
"2016-04-10":5101458,
"2016-04-11":5776419,
"2016-04-12":5692041,
"2016-04-13":5568383,
"2016-04-14":5555027,
"2016-04-15":5116844,
"2016-04-16":4653882,
"2016-04-17":5112466,
"2016-04-18":5764588
}}
When I pass it through the jQuery each function, it works fine, but then it throws a random:
Uncaught TypeError: Cannot read 'visits' of undefined
The following is the jQuery code:
console.log(dataset['visits']); // Prints the data above
$.each(dataset['visits'], function(index,value) {
pageName = index;
$.each(dataset['visits'][index], function(index,value) {
timeline.push(index);
visits_data.push(parseInt(value));
console.log(timeline);
})
});
What's causing the error?
Found out that the reason the program is raising an error is because I placed the jQuery ready function, which within it includes the function I wrote above, in the JavaScript file versus the HTML file.
In essence, this:
$(document).ready(function(){
var collected_results = graph_data(dataset); // Has the each function
var visitsChart = new Chart(collected_results[0], collected_results[1]);
var devicesChart = new Chart(collected_results[2], collected_results[3]);
var osChart = new Chart(collected_results[4], collected_results[5]);
})
was in the JavaScript file, and the JavaScript file loads faster than the HTML file.
Because the JS file loads faster than the HTML file, it raises the error because it cannot read the objects.
I am trying to learn javascript templating, namely dustjs but I encountered problem which I think is so basic even google cannot answer it :)
Here is code in it's simplest form
<button class="getData" onClick="clicker()">Get Data</button>
<ul class="vodka">
<script id="vodka" type="text/x-template">
<li>{name}</li>
</script>
</ul>
Javascript
window.addEventListener("load", clicker)
function clicker()
{
getData();
}
function getData()
{
var data = {name:"Vodka", degree:97}
var source = $("#vodka").html();
var template = dust.compile(source, "vodkaTemplate");
dust.loadSource(template);
dust.render("vodkaTemplate", data, function(err, res){
$(".vodka").html(res)
console.log(res)
})
}
During initialization template renders perfectly but clicking on button causes error
Uncaught TypeError: Cannot read property 'substr' of undefined
What am I doing wrong?
You render the template once on load (line 1 of your script).
When you render the template, you replace the contents of <ul class="vodka"> with the rendered template.
However, you have placed your template source inside this container as well, for whatever reason. The template source is removed from the DOM on the first render, since it was replaced with the rendered content. So when you try to render the template a second time, this line sets source to null:
var source = $("#vodka").html(); // #vodka does not exist anymore
And Dust errors out because it is trying to compile null to a template.
I was checking the JS console out and it helped me fix a few minor issues, but I would like to know if this warning is anything to seriously worry about?
This is the code which gives the error:
<script type="text/javascript"
src="https://www.safaviehhome.com/product_images/locations/js/jqgalscroll.js"></script>
<script src="https://www.safaviehhome.com/product_images/mainnav/stuHover.js" type="text/javascript"></script>
<script>
function layerSetup(id,visibility){
if(document.getElementById){
this.obj = document.getElementById(id).style;
Uncaught TypeError: Cannot read property 'style' of null
Uncaught TypeError: Cannot read property 'style' of null
<!--Includes many more of the same "Cannot read property 'style' of null messages -->
this.obj.visibility = visibility;
return this.obj;}
else if(document.all){
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.layers){
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;}
}
function visVisible(param){
new layerSetup(param,'visible');
}
function visHidden(param){
new layerSetup(param,'hidden');
}</script>
I cannot really figure out why this is happening and whether it's something I should worry about since our Rug categories function fine. Can anybody offer any insight? I apologize for not offering any of my own explanations but I didn't write this JS a former co-worked did and it's now up to me to debug every mistake he made. It's a learning process but I'm still somewhat new to this ..
This could be happening for two reasons.
Somewhere on the page the layerSetup function is being called with null as one of the parameters.
An element with the id being passed the the layerSetup function does not exist on the page.
In the Chrome dev console you can click Pause on All Exceptions, a button in the bottom left bar with a pause symbol. This will help you to determine what the parameters are that are being passed to the function.
Avoid document.all
http://www.javascripttoolbox.com/bestpractices/
http://simonwillison.net/2003/Aug/11/documentAll/