We just installed an error-tracker for our Ember-application, and the only error that is reported is Cannot read property 'find' of undefined. The code that cause this error is within a component, and looks like this:
this.set('interval', setInterval(() => {
const current = this.get('counter') - 1;
this.set('counter', current);
this.$().find('.countdown-number').text(current); // <- error here
}, 1000));
I don't understand how this can happen. How can $() be undefined, since it's a part of the ember framework?
According to the error-tracker, it happens for a bunch of different browsers, latest Chrome for example. I however can't reproduce the error in any browser.
I know this isn't the "ember way" of updating a text in a div, but I would prefer to not have to rebuild a lot, I just want to fix the bug with as little changes as possible.
this.$() will be undefined if component is destroyed or didn't render properly. Make sure you call this.$() only when component is in DOM and on willDestroyElement you remove all events that could access this.$().
Related
I realize this is not recommended by the JS community but I think have a good use case for overriding the Object.prototype so that accessing properties of undefined objects returns undefined instead of throwing an app crashing error.
Little background information:
Working with a large app (about 200k lines of code)
App is extremely configurable with loads of options - there's no way of testing every possibility
Angular 2/Ionic 2 project
Basically, I'd like to make it so that the following code console logs 'undefined' instead of generating an error:
Pseudo code:
Object.defineProperty(Object.prototype, Object.prototype.get, (val) => {
try {
console.log(val);
} catch (e) {
console.log('Attempted to access undefined property');
}
});
const obj = {
a: 'b'
};
console.log(obj.a.b.c); // should log undefined but actually generates an app freezing issue
Questions:
How can I make this work? Is there another way I can prevent null check errors across the entire app without adding too much code? Is there a generic fix for making it so that these null check errors do not crash the Angular/Ionic app?
I am trying to use jquery for dom manipulation on mount event of a component like this.
<my-tag>
<p>hi</p>
<script>
this.on('mount',funciton() {
$('.abc').hide();
})
</script>
</my-tag>
This throws an error shown below
TypeError: Cannot read property 'toString' of undefined
at ServerResponse.writeHead (_http_server.js:189:44)
If I replace
$(".abc").hide()
with
console.log("test");
This works perfectly. Any idea why this is happening?
Given below are the version details
Riot version:
riot-cli: 2.3.14 - https://github.com/riot/cli
riot-compiler: 2.3.22 - https://github.com/riot/compiler
Update
This issue happens only if if place it in this.on('mount')
I tried placing it on this.on('all') and it works fine.
I don't think all is a valid Riot event. As for using jQuery on the server, I'd avoid this if possible. If you are hiding an element in your component, then you should be using Riot to switch out a CSS class. If this element is outside your component, you should be emitting events into an outer / global observable / pubsub handler. If you must use jQuery you have to make sure your loading jQuery via Node's require, or using other solutions like DomJS or Cheerio.
Im working on a project to build a CRUD system using knockout and getting and saving my data via AJAX. Been having issues binding the select dropdown. When I try to edit an incident I get the following error:
Uncaught TypeError: Cannot read property 'push' of undefined
I created a jsfiddle http://jsfiddle.net/rqwku4kb/20/ to demonstrate the issue. I'm still working on the delete and add a new incident link so they are not working yet but im working on that seperately.
Here is the code that`s causing me issues at the moment.
self.ShowMeTheCurrentSelectedIncident = function(data) {
self.currentIncident();
self.chosen_composante.push([data.Composante]);
};
Would anyone have have any idea where the issue might be or be able to provide me some advice?
The method here is what's wrong:
self.ShowMeTheCurrentSelectedIncident = function(data) {
self.currentIncident(); // (1)
self.chosen_composante.push([data.Composante]); // (2)
};
What this does:
(1) get the value of the observable currentIncident and then throw it away. It's always null and never set so this is doubly redundant.
(2) Reference an undefined variable called chosen_composante which does not exist in IncidentList.
I could not fix this for you since I wasn't sure what values were to go where, but it should be enough to set you on the right track - you're confusing the properties of the IncidentList and Incident
I'm using a jQuery plugin called toggleEdit for inline editing.
Everything works fine when the code is actually used in the page.
However, my test suite fails with the following error:
TypeError: Cannot call method 'remove' of undefined
I tracked it down to be triggered from within the clear method of this particular plugin. Its source file can be found here.
There are two relevant bits in that code:
1- The _init function
self.element.addClass("toggleEdit toggleEdit-edit toggleEdit-edit-" +
self._tag(self.element))
//store reference to preview element
.data("toggleEdit-preview", self.p);
As you can see, when the plugin is first instantiated it uses the data structure on self to store the newly created element.
2- The clear function
self.element.data("toggleEdit-preview").remove();
The clear function then tries to access that structure and retrieve the element. That's when, while inside a jasmine spec, it fails with the aforementioned exception.
Has anyone seen anything similar?
EDIT:
This is my spec, it's the simplest piece of code able to reproduce the error:
it("should update the given attribute on the server", function(){
$('#user-details input, #user-details select').toggleEdit(); //this line triggers the error
});
http://alz.so/static/plugins/toggleedit/jquery.toggleedit.js
I was taking a look at the source for toggleEdit and it seems that the only 2 times the function clear is called is just before self.element.data gets set:
if (typeof self.element.data("toggleEdit-preview") !== "undefined") {
self.clear();
self.disableEvents();
}
And at destroy function:
destroy: function() {
var self = this;
self.clear();
self.disableEvents();
$.Widget.prototype.destroy.apply(self, arguments);
}
Since the first call seems to be protected, I ask you a somewhat dumb question: Is it possible that destroy is being called twice?
Found my problem: old version of the jQuery + jQuery UI duo. Upgrading them resolves the exception.
I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .
Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.
It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.