Jquery CallBack Parameters - javascript

Not sure what I am doing wrong here, but let me setup the scenario.
In the beginning, a store(resultsStore) is being populated with data and being displayed via a function call.
Now, an intermediate step of obtaining more data by way of another store is needed and passing both sets to the original function.
I have tried many variations of the below, but the two datasets do not seem to be passed to the updateLeftPanel function, the first one is there fine, the second says "undefined". Anything obvious I am missing?
resultsStore.load({
params: {
'certid' : certId
},
callback: function(record,operation,success){
updateRightPanel(record[0].data); // code not shown,works fine
//updateLeftPanel(record[0].data); // original call
loadCriteriaStore(record[0].data); // new call
}
});
function loadCriteriaStore(data)
{
criteriaStore.load({
params: {
'edition' : data['Edition']
},
callback: function(record,operation,success,data){
updateLeftPanel(data,record[0].data);
// orig data first, new dataset second
}
});
}
function updateLeftPanel(data, dataa){
// code here
dataa object still unpopulated
}

In the callback in the loadCriteriaStore function, you are assigning 4 parameters. I'm assuming that it only passes 3.
So, in that callback, the data that contains your data is being overwritten by a new "local" data, that's undefined.
function loadCriteriaStore(data)
{
criteriaStore.load({
params: {
'edition' : data['Edition']
},
// Get rid of the ",data" here
callback: function(record,operation,success){
// the `data` param will be the value passed to `loadCriteriaStore`
updateLeftPanel(data,record[0].data);
// orig data first, new dataset second
}
});
}

Related

SAPUI5: Cannot read property 'call' of undefined on elementBinding

I'm trying to do some operations after a successful data binding of the view. The best idea would be in my opinion to do it in the callback of the attachModelContextChange method. After defining which method would be the callback and attaching the event listener to the view, when I try to bind data to my view, I get the error: Cannot read property 'call' of undefined. I'm pasting my controllers code fragments below and the stack trace.
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.attachRouteMatched(this.routeMatched, this);
},
routeMatched: function(oEvent) {
var sEntityPath,
oParameters = oEvent.getParameters();
this.routeName = oParameters.name;
this.getView().detachModelContextChange(
this.modelCallback('edit'),
this.getView()
);
if (oParameters.name === "EditItem") {
if (!isNaN(oParameters.arguments.id)) {
this.getView().attachModelContextChange(null,
this.modelCallback('edit'),
this.getView()
);
sEntityPath = "/ItemData(" + oParameters.arguments.id + ")";
this.getView().bindElement(sEntityPath);
} else {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("CreateItem", {
from: "EditItem"
}, false);
}
}
},
modelCallback: function(type) {
console.log(type);
}
The console.log from the modelCallback method is launching properly. Removing the line with
this.getView().bindElement(sEntityPath);
prevents the error from triggering (but this way I'm of course not getting any data in my view).
Any ideas what am I missing?
Below I'm pasting the stack trace:
datajs.js:17 Uncaught TypeError: Cannot read property 'call' of undefined
at f.a.fireEvent (sap-ui-core.js:449)
at f.a.fireEvent (sap-ui-core.js:991)
at f.fireModelContextChange (sap-ui-core.js:573)
at f.h.setElementBindingContext (sap-ui-core.js:524)
at constructor.i (sap-ui-core.js:500)
at constructor.a.fireEvent (sap-ui-core.js:449)
at constructor.B._fireChange (sap-ui-core.js:1302)
at eval (library-preload.js:2375)
at u (library-preload.js:2460)
at d.r._processSuccess (library-preload.js:2492)
You have incorrect parameters in attachModelContextChange call. The only required parameter is a callback function, modelCallback in your case. You pass null as oData optional parameter which can be omitted. The correct call should look like this:
this.getView().attachModelContextChange(
this.modelCallback, // the function, not the result of its call!
this // Instance of controller (not View!), which is now *this*
);
Also, the call of detachModelContextChange should be with the same parameters to make it work:
this.getView().detachModelContextChange(
this.modelCallback, // the function, not the result of its call!
this // Instance of controller (not View!), which is now *this*
);
when you place this.modelCallback('edit') at the parameter list then first the function is executed and then its result is passed as a parameter to attachModelContextChange (or detachModelContextChange)
onRowSelect:function(oAnubhav){
//alert("Yes, Row Selection Worked Roger !");
//step1 get the path of the selection item.
debugger;
var sPath= oAnubhav.getParameter("rowContext").getPath();
//step2 transfer the element data to the simpleformcontrol,using bind element.
//2.1 get the object of simpleform-parent of all input.
// var oSimple=this.getView().byId("idSimple");
//2.2the entire simpleform new recives data form table elementselected.
//oSimple.bindElement(sPath);
this.getView().bindElement(sPath);
},

Dynamically added object properties not being added in Javascript

Please bare bear with me, I'm very new to Javascript. I am pulling my hair out trying to figure out why this won't work. Keep in mind I come from a Java background. I have a function 'getCsvData' and I'm essentially trying to parse a CSV file and dynamically add object properties to the datasource object and then return it. As you can see, outside the function 'getCsvData', I try to log the results after calling my function, but the result object is empty and there are no object propeties added to it.
I have a very strong feeling it has to due with closure/scope chain resolution that I'm still trying to learn and understand.
The questions are: Why aren't the properties added dynamically to the datasource object? I believe they actually are added in the scope of the anonymous function 'function(data)' passed as the second argument to '$.get', but they are immediately gone once the outer function 'getCsvData' returns. Why, and how can I fix this? Thanks!!
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/knockout-3.0.0.js"></script>
<script src="js/globalize.min.js"></script>
<script src="js/dx.chartjs.js"></script>
<script src="js/jquery.parse.js"></script>
$(function () {
function getCsvData(fileName, groupBy, year) {
var datasource = { }
$.get(fileName, function(data) {
var alldata = $.parse(data, { header: true });
for (var i = 0; i<alldata.results.rows.length;i++) {
var key = alldata.results.rows[i][groupBy]
if (key in datasource) {
datasource[key] = datasource[key] + 1
} else {
datasource[key] = 0
}
}
});
return datasource;
};
var results = getCsvData("data/data.csv", "Priority", 2012);
console.log(results)
for (key in results) {
console.log(key)
}
});
This is because get is called async, so datasource is the return value after initiating the get rather than after receiving the result (i.e. it is empty because the get completion has not been called yet). You should rather indicate completion with a callback or use jQuery.ajax() with the sync option to wait for the response to the get before returning from getCsvData. See here.

Second parameter never arrives

I have created a custom trigger with jQuery that accepts two parameters, but the second never arrives.
//firstly
$(Crafty).bind('onTsxLoaded', function (event, tsx, firstSpriteId) {
console.log("tsx", tsx);
console.log("firstspriteid", firstSpriteId);
}
//<snip>
success: function (xml) {
var firstSpriteId = tileset.attr("firstgid");
console.log("done loading ts", firstSpriteId);
$(Crafty).trigger('onTsxLoaded', xml, firstSpriteId);
}
yields:
"done loading ts" 1
"tsx" object
"firstspriteid" undefined
Why is firstspriteid 1 before trigger and undefined right after?
If you want to pass extra parameters to an event using trigger, they need to be in an array.
$(Crafty).trigger('onTsxLoaded', [xml, firstSpriteId]);

Function in a variable, passing a parameter

I can't seem to get back on track with this one. I simply put a function in a variable and want to call it later, providing it with a parameter:
var logic = function(itemId) {
console.log(itemId);
};
jQuery("#flipright").click(function() { logic.apply(1); } );
This prints "undefinded".
What am I missing?
Simply call logic(1).
If you want to pass a context, you can use call or apply :
logic.apply(context, [1]);
// or
logic.call(context, 1);
You should use apply or call if you want to pass a context to another function - meaning that the this keyword in the called function will refer to whatever context you are passing to it.
Here's a scenario :
var logic = function(itemId) {
console.log(this,itemId);
};
jQuery("#flipright").click(function() {
// output to console the current jquery object and "1"
logic.call(this,1);
});
Make it:
jQuery("#flipright").click(function() { logic(1); } );
ref for apply: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

JQuery making ajax options dynamic

right now in my $.ajax({ ..}); call I have the following option:
data: { param0: param0, param1: param1}
Say I want the number of parameters to by dynamic (based on a variable passed to the function in which the ajax call is made). How do I provide data: a dynamic set of parameters? I think I need to somehow construct an object (?) ahead of time (i.e. before the ajax call) and then pass this object to data:..but I'm not sure how to do this.
By variable passed in, I mean optional parameters which will be used as the GET params: param2 and param3 if they are passed in. So:
function myAjaxCall(param0, param1, param2, param3) { // param2/3 are optional
$.ajax({
//...
data: { param0: param0, param1: param1} // this will need param2/3 if passed in
//..
});
}
So depending on if param2 and param3 are passed in (either, none or both is valid) I need the data object constructed accordingly.
As you mentioned you need to make an object out of your parameters and pass it as data:
var mydata = {
name: 'ali',
email: 'ali#example.com',
...
}
$.ajax({
...
data: mydata,
...
});
You should make use of the automatically created arguments array.
function myAjaxCall() {
$.ajax({
data: arguments, // "arguments" is an Array Object created automatically by JS
...
});
}
or, if you want it to be an object literal with the arguments array as a property:
function myAjaxCall() {
$.ajax({
data: {args: arguments}, // "arguments" is an Array Object
... // created automatically by JS
});
}
You can call this with any number of parameters, and the parameters can be any data form.
myAjaxCall({ fruit: "apple"}, "blah", 500, true);
Note that arguments is read only, so if you want to work with it, you have to copy it, and arguments.splice(0) will not work.... you have to use a for loop.
To check how many arguments were passed in, simply look at arguments.length.

Categories

Resources