Updating object within function - javascript

Anybody suggest why the button doesn't work here? I must have a syntax error but the console is showing no errors and the JS is valid. http://jsfiddle.net/FZ6K6/20/
self.msg = function () {
self.msgbox = {
status: "information",
message: "Enter some info"
};

You're passing a constructor function to applyBindings().
Since the function itself has no useful properties, nothing happens.
You probably want to pass an instance of that function using new.

There are a couple issues here, including the lack of an instance of your View Model.
Check out the notes I posted on this updated fiddle:
http://jsfiddle.net/FZ6K6/22/
ko.applyBindings(new FormViewModel(),document.getElementById('domElementToBind'));
Not only are we 'new-ing' up an instance of FormViewModel, but we're also specifically assigning a DOM element to apply the bindings to...which is good practice.

Related

ngTagsInput not binding to model

I just started using the ngTagsInput angular library and I am having issues with it updating the model. I show the tag input in an ionicPopup and interestingly the on-tag-added event fires which shows that $scope.sites[] IS populated.
When I call $scope.test() the array is empty. The only context in which it holds a value is the method tied to the on-tag-added event.
Here is a simplified controller example:
$scope.sites = [];
$scope.addSites = function() {
// this works
console.log("In addSites");
console.dir($scope.sites);
}
$scope.test = function() {
// in any other method $scope.sites is empty
console.dir($scope.sites);
}
In my view I have the tag element defined as:
<tags-input ng-model="sites" add-on-space="true" placeholder="Add Site Numbers" on-tag-added="addSites($tag)"></tags-input>
I find it incredibly strange that a $scope variable can contain the values I expect within the context of the library event but not outside of that.
Is there anything special that needs to be done in terms of binding? As far as the documentation goes I don't see what I am missing. Any suggestions would be much appreciated.
After a lot of trial and error I ended up solving this by doing the following.
<tags-input ng-model="$parent.sites" add-on-space="true" placeholder="Add Site Numbers" on-tag-added="addSites($tag)"></tags-input>
I was already passing 'scope : $scope' in my call to $ionicPopup({}) but without the ng-model set to "$parent.sites" it wasn't binding correctly.
Hopefully this saves somebody down the road from pulling their hair out!

Passing object and its methods to onchange function in Javascript

I am using TableExport.js script to export an html table, and I need to export the data after I've filtered it by hiding the rows I don't want. TableExport's method .update() comes in really useful here, but I am having some problems to call it every time the data is filtered, which is associated to an onchange event. Here are the relevant pieces of my code:
$(function () {
var exportedTable = $("#taskListTable").tableExport();
exportedTable.update({
// some options
});
$('body').on('change', '.filter', function (exportedTable) {
// some code for filtering
tableUpdate(exportedTable);
});
})
function tableUpdate(table) {
table.update({
ignoreCSS: ["tr.tableexport-ignore", "tr.tableexport-ignore>td",
"tr.tableexport-ignore>th", "tr.hidden", "tr.hidden>td"]
});
}
I keep getting an error of the type Uncaught TypeError: Cannot read property 'update' of undefined. I've been reading lots of threads (like this: Javascript passing object to function) and other info to understand the difference between passing by value and reference, but the more I read and try the more chaotic my mind is getting. So can anyone see what it is failing in my approach? - It's partly legacy code though, but I'm open to re-structure most of it if necessary.
I guess this is more a problem of JS misuse, so I hope this question will be useful both for people working with TableExport and people with similar JS issues. So I summon thee, JavaScript Jedis!
Event handler functions are called with an event object as the parameter. You probably just wanted to access exportedTable from the scope, rather than accepting it as an argument.
As #guest said, you simply have to remove exportedTable from parameters:
$('body').on('change', '.filter', function () {
# some code for filtering
tableUpdate(exportedTable);
});

Onsubmit event is not null and JavaScript object says it's null?

A picture is worth a 1000 words:
As you can see from the picture above the form has a onsubmit event. But when I try to reference the onsubmit even it's telling me it's null.
The reason I'm asking this question is because I'm trying to clear the onsubmit event:
doc.getElementById("frmMaster").onsubmit = null;
Which is not working.
What am I doing wrong here?
I was able to work around the issue yesterday. After browsing the object hierarchy using chrome developer tools i noticed the object had a "onsubmit" attribute but the "onsubmit" property was already null. So:
doc.getElementById("frmMaster").removeAttribute("onsubmit");
successfully removed the event. I admit i don't totally grasp the difference between the event as a property or as an attribute but at least it resolved the issue.
I believe to unregister events you must use removeEventListener('event', boundFunction). A problem that arises from the code you have is that WebForm_OnSubmit may not be defined at a place accessible to you. What you will need to do is get that function into a context you can access from the console (or wherever you ultimately want to call this code). So you can essentially do this:
/*
somewhere in your server code, or wherever this WebForm_OnSubmit is defined
var handleToWebForm_OnSubmit = WebForm_OnSubmit; //must be global scope
// you will need to get a reference in javascript to this function
// and bind it so that you can willingly unbind it
*/
doc.getElementById("frmMaster").removeEventListener('submit', handleToWebForm_OnSubmit)

TypeError: this._url is undefined at Dojo FilteringSelect onChange callback

I keep getting following error: TypeError: this._url is undefined at the callback of a Dojo FilteringSelect.
I simplified my code to this:
var testFeatures = [
{ "id": 1, "Adresa": "Pyšvejcova 6, Kotěhůlky"},
...
];
var filteringSelect = new FilteringSelect({
id: "testSelect",
autoComplete: false,
searchAttr: "Adresa",
store: new Memory({ data: testFeatures }),
onChange: this.onSelected
}, "testSelect");
filteringSelect.startup();
//end of the function, still in the same define callback
onSelected: function () {
//custom processing
var queryTask = new esri.tasks.QueryTask(this.serviceUrl);
var query = new esri.tasks.Query();
query.outFields = ["OBJECTID"];
query.where = "Adresa=" + dojo.byId("testSelect").value;
query.returnGeometry = true;
queryTask.execute(query, this.zoomToSelected);
}
zoomToSelected: function (featureSet) {
//custom map processing
}
and HTML:
<input id="testSelect" data-dojo-attach-point="testSelect" />
I have no idea where's the problem, Google found no case similar to mine. FireBug says the error occurs in init.js. Console says line 199, but the code in question (...nction(){},onExecuteForCountComplete:function(){},onExecuteForExtentComplete:fun...) is on line 256.
One possible cause of problems might be ArcGIS JavaScript API or Web AppBuilder - this seems not to be one of the "ArcGIS-heavy" parts of the code, but I don't know for sure. It's ArcGIS JS API 3.15 (Dojo 1.10) and Web AppBuilder for developers version 1.4.
EDIT: with help of #KenFranqueiro and this post I made some progress. I can't say that I fully understand the onChange callbacks, but I learnt to omit the parentheses while calling a named function. The onSelected still wasn't called, but modifying the input data to include id solved this. But it didn't solve the main problem...
Now the old good TypeError: this._url is undefined occurs at queryTask.execute, or between it and start of zoomToSelected method. The exact place where the error occurs changed to line 256, column 351, with following referenced code:
...e:function(a,b,c,d,f){var m=f.assembly;a=this._encode(n.mixin({},this._url.query...
There is a pointer at the = after "a", so the error seems to be to the right of it, trying to mixin something non-existent to something else. I have no idea what the this in the init.js should mean. Unfortunately, dojo core code is almost undebuggable without some de-obfuscation. Is this my only option, or does anybody know how to solve it?
So debugging the init.js wasn't so hard, it takes QueryTask as this. As far as I know, this shouldn't have a _url attribute. So I must have some mistake in the queryTask as well.
Obsolete part of the question, archived:
I wonder whether the problem might be caused by the onChange callback's argument, which I don't really understand. I've read several examples of Dojo FilteringSelect with onChange event set, like the official one. Usually it has some argument, but I don't know what does it mean and where it gets from. In the official example it corresponds to the div id and nothing else. However, how is the id translated to a variable and even whether my assumption that it's the id is correct. The detailed documentation is not much helpful in this case.
Older EDIT: testSelect is an object. Seems it was created implicitly with the dom - it's a childnode of this.domNode. So now I understand where it comes from, but not how to prepare another function to be called on change and why the correct syntax is what it is.
Also, I don't know where exactly is the problematic undefined this._url supposed to exist. In my example, this refers to the dijit, but I have no idea what is the scope of the part of init.js where the problem occurs.
I'm not sure how much related are the two subquestions (confusion in the onChange callback and identification of this in init.js), I only suppose they are symptoms of the same issue since the error is thrown at the onChange event in my code.
The problem at the query was caused by this.serviceUrl either missing as a part of wrong coontext, or being an object instead of a URL string. So the final step was to make sure the correct context is used (by lang/hitch) and then setting this.serviceUrl to be what I originally thought, one of the attributes of the object referenced as serviceUrl before.

Javascript replace a function with a new one containing dynamic contents

My Javascript knowledge is less experienced, so I might use wrong descriptions in the following.
I have an object in a static .js file:
var Info = {
methodA: function() {
// Call methodB.
this.methodB('test');
},
methodB: function(value) {
// Do stuff
}
}
Now, in an .aspx file, I create a function methodC(value) with varying contents (depending on some data), which I want to insert instead of the above definition of methodB(value):
...
var methodC = function(value) {
// Do different stuff
}
...
My idea has so far been to replace methodB with methodC in the following fashion:
...
Info.methodB = methodC;
...
Using IE's buildin developer tool, I get the following error when calling this.methodB('test'); from Info.methodA():
Object doesn’t support this property
or method
Removing the 'this' from this.methodB('test') results in the error:
Object expected
I don't get any errors using FireBug - probably because I use various frameworks, which might catch the error.
How should I do this or should I use a completely different approach?
Regards, Casper
It should work, you are doing it the right way. The problem lays elsewhere.
update:
This should still work as long as you call methodA on an object, eg Info.methodA().
Maybe you are not understanding the error messages ?
"Object doesn’t support this property or method" means that in the expression "this.methodB()", this doesn't have a property named "methodB". So it means that this is not Info when the code of methodA is executed.
"Object expected" means that the variable methodB is unknown in the current execution context. Of course it is, since methodB is never a variable, only a property of Info.
To debug your problem, you need to know what is this when a code is executed, and why it's not what you think it should be. When you call Info.methodA(), this is set to be Info when methodA begins its execution.

Categories