KnockoutJS - Select dropdown binding not working - javascript

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

Related

I got a TypeError after i tried to implement "Edit" and "Delete" in a JavaScript form

I need to make a JavaScript form that allows you to edit or delete stuff that you submitted.
I used this tutorial (https://www.youtube.com/watch?v=-rNQeJi3Wp4), but when I tried to implement the edit function, it doesn't create the hyperlink, and when I click on it, it says
script.js:14 Uncaught TypeError: Cannot read property '0' of undefined.
at editRow (script.js:14)
at HTMLAnchorElement.onclick (index.html:1)"
Also I found out that the "selectedRow.cells" returns "undefined".
here is the code:
https://pastebin.com/pZVQ91D0
here is the function:
function editRow(td) {
//document.getElementById("AS").deleteRow(td);
selectedRow = td.parentElement.parentElement;
console.log(selectedRow.cells);
input.value = selectedRow.cells[0].innerHTML;
}
(The guy in the video solved the whole thing differently. I just tried to implement SOME of his code into my approach.)
Can you help me?
The value of selectedRow.cells is undefined so you are getting that error. The cells should have an some value. If you can add more code it will be helpful.

Ember cannot read property 'find' of undefined

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.$().

Error with JQuery DataTables and ColVis plugin "Cannot read property 'sWidth' of undefined"

Using the jquery.datatables plugin with the ColVis addon, I recieve this error when I remove a column:
"Cannot read property 'sWidth' of undefined". I haven't been able to find a solution to this error online.
I'm not sure what's causing the error, although I do have a fix that I would like to post for the benefit of other's who run into this issue.
I'm using jquery.datatables 1.9.4 from http://datatables.net/.
I had this error when the number of columns in
<thead></thead>
was different from the number of columns in
$('#ls-table').DataTable($.extend({}, window.coonDataTableOptions, {
columns: [
<here>
]
}));
On line 3255 of the DataTables source code is this line of code:
nThs[i].style.width = o.aoColumns[iVis].sWidth;
In this case o.aoColumns[iVis] is null because the column represented by the index has just been hidden. It seems like I've run into a corner case that the creators of the plugins weren't expecting. The above code gets called in response to an internal datatables event, which is triggered by a method called by ColVis when a column is hidden. All that's needed to work around this is to change the above code to:
var column = o.aoColumns[iVis];
if(column != null) {
nThs[i].style.width = o.aoColumns[iVis].sWidth;
}
unfortunately this requires editing the core plugin code, but I'll put in a bug report and hope that they resolve this soon. in the meantime, hopefully this helps people looking for a workaround.
Such error occurs just due to populating columns within
...DataTable(...
"columns":...
)
mismatch with the defined HTML page Have number of columns.
..
..
search a.aoColumns[D].sWidth ,replace
var column = a.aoColumns[D];if(column != null) {c.style.width=a.aoColumns[D].sWidth}

Uncaught TypeError: Cannot read property 'value' of null, need some direction

I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().

TypeError when running jasmine specs that use a jQuery plugin built using the Widget factory

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.

Categories

Resources