How do I pass multiple arrays to a controller in jquery without using JSON?
var Test1 = {};
Test1.Source = 'String1';
Test2.Type = 'String2';
var Test2 = {};
Test2.Name = 'String3';
Test2.Location = 'String4';
My controller is
public Int64 Method1(Class1 cl1, Class2 cl2)
{
}
What is the correct syntax for the data property of $.ajax()?
With one argument, I can have
data: Test1
However, how does this work with two or more arguments?
Just wrap in another object, like this, so that each array (object actually) is a property:
data: {t1: Test1, t2: Test2 }
You can see an example of this in the docs (although with string values instead).
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
Related
I have the follow problem: I need to consume a REST service (3rd party, not mine) and show the result data to the user using an Ext.grid.Panel.
The problem is I have no idea of the data structure and content ( it is a JSON from Geoserver's queryLayer ) so I can't have a store/grid/model field definition to respect the ExtJS MVC design.
So how can I be more flexible in this situation? I try to add a row to the grid by hand but after read https://www.sencha.com/forum/showthread.php?48625-how-can-i-insert-a-row-in-GRID I think it is a kind of crime to do
You can add a conversion layer for dynamic fields in the model class. The conversion will provide a string readable format for data you don't know the structure.
Ext.define('AppName.DynamicRow', {
extend: 'Ext.data.Model',
fields: [{
name: 'fixed1',
type: 'string'
}, {
name: 'fixed2',
type: 'string'
}, {
name: 'dynamic',
type: 'string',
calculate: function (data) {
Ext.Object.getAllKeys(data)
.map(function(key) {
return key + ': ' + data[key];
})
.join(', ');
}
}]
});
Then you will show all unstructured data in a grid column simply adding 'dynamic' field as dataIndex.
My workaround:
First, receive the data using a function to concentrate all creation stuff:
function addGrid ( title, data ) {
var storeColumns = getStoreColumnsFromJson( data[0] );
var gridColumns = getGridColumnsFromJson( data[0] );
var store = createStore( data, storeColumns );
var grid = createGrid( title, store, gridColumns );
myContainerWindowPanel.add( grid );
}
Now, I need to take a data sample (first row) to get the column names from the JSON data to the grid and its store:
function getStoreColumnsFromJson ( obj ) {
var keys = [];
for (var key in obj) {
if ( obj.hasOwnProperty(key) ) {
keys.push({name : key});
}
}
return keys;
}
function getGridColumnsFromJson ( obj ) {
var keys = [];
for (var key in obj) {
if ( obj.hasOwnProperty(key) ) {
keys.push({text: key, dataIndex: key});
}
}
return keys;
}
Now I'll create the grid and the store. I will not use the Model simply because this worked without it. If someone have a strong advice to create the model I'll appreciate.
function createGrid ( title, store, columnNames ) {
var dummyGrid = Ext.create('Ext.grid.Panel', {
border: false,
title : title,
store : store,
frame: false,
margin: "10 0 0 0",
flex:1,
loadMask: true,
columns:columnNames,
autoHeight:true
});
return dummyGrid;
}
function createStore ( storeData, columns ) {
var arrData = [];
var theData = storeData;
if ( !$.isArray( storeData ) ) {
arrData.push( storeData );
theData = arrData;
}
var store = Ext.create('Ext.data.Store',{
fields: columns,
autoLoad: true,
data: theData
});
return store;
}
We are implementing an extended My Quotations Fiori application. Basically we added a new field Sales Order to the UI. The field fetches data from the backend so we also extended our OData service. On the first view, we can successfully call the data. But whenever we navigate to the next view via clicking Edit button, we get this error
Property 'SalesOrder' is invalid. Choose "Refresh" to update pricing information.
Anyone has an idea on how to solve this?
Here is our custom code for S3 view controller. We used WEB IDE to create the extension btw. The second function is for the creation of the Sales Order whenever the quotation has no associated SO tied to it.
manageSalesOrderFields: function() {
alert("manageSalesOrderFields");
var salesOrderId = "";
// hide all fields
view.byId("salesOrderLabel").setVisible(false);
view.byId("salesOrderText").setVisible(false);
view.byId("triggerSalesOrderLabel").setVisible(false);
view.byId("triggerSalesOrderButton").setVisible(false);
$.getJSON("/sap/opu/odata/sap/zlord_my_quotation_srv/QuotationHeaderSet('" + quotationId + "')",
function(data) {
alert("enterHere");
salesOrderId = data.d.SalesOrder;
alert(salesOrderId);
if (salesOrderId !== "" ){
view.byId("salesOrderLabel").setVisible(true);
view.byId("salesOrderText").setVisible(true);
}else{
view.byId("triggerSalesOrderLabel").setVisible(true);
view.byId("triggerSalesOrderButton").setVisible(true);
view.byId("triggerSalesOrderButton").detachPress(sap.ui.controller("...").createSalesOrder);
view.byId("triggerSalesOrderButton").attachPress(sap.ui.controller("...").createSalesOrder);
}
});
},
createSalesOrder: function () {
var createSalesOrderDialog = new sap.m.Dialog("createSoDialog", {
title: "Create Sales Order",
icon: "sap-icon://sales-order",
content: [
new sap.ui.core.HTML({content:"<p style='margin:0;padding: 16px;'>Do want to create a sales order?</p>"})
],
buttons:[
new sap.m.Button({
text: "Yes",
press : function() {
var oModel = new sap.ui.model.odata.ODataModel('/sap/opu/odata/sap/zlord_my_quotation_srv/');
var oParameter = {
"QuotationID" : quotationId
};
oModel.callFunction('/CreateSalesOrder', 'GET', oParameter, 'null',
function (oData, oResponse) {
var responseMessage = JSON.stringify(oResponse.body);
var responseMessageStart = responseMessage.search('<d:Message>');
var responseMessageEnd = responseMessage.search('</d:Message>');
responseMessage = responseMessage.substring(responseMessageStart + 11, responseMessageEnd);
//show MessageToast
sap.m.MessageToast.show(responseMessage);
view.byId("triggerSalesOrderLabel").setVisible(false);
view.byId("triggerSalesOrderButton").setVisible(false);
console.log(responseMessage);
},
function (oError) {
sap.m.MessageToast.show('Error - see log');
console.log(oError);
}
);
createSalesOrderDialog.close();
createSalesOrderDialog.destroy();
}
}),
new sap.m.Button({
text: "No",
press : function() {
createSalesOrderDialog.close();
createSalesOrderDialog.destroy();
}
})
]
});
createSalesOrderDialog.open();
}
We didn't edit anything on the next view controller (CreateQuotations.view.controller.js) since it is not relevant for us to show the SO number on that view.
The error is because of this line:
salesOrderId = data.d.SalesOrder;
How to fix?
Step 1 : Check results first in network tab for the call:
/sap/opu/odata/sap/zlord_my_quotation_srv/QuotationHeaderSet('quotationIdId');
Sample:
Step 2: Check the results hierarchy . How?
console.log(data); //in success call
Step 3: Then restructure your statement to something like this
salesOrderId = data.d.results[0].SalesOrder;
Hope this helps!
Alright I'm stuck creating a yeoman generator. I have a prompt that brings up a list of three different options to choose from. It looks like this:
Name of JS file:
- One
- Two
- Other
I want the third one to allow the option to allow the user to write their own. Mabye I can call another prompt method?
// ****************************************************************************
// Author: Daniel Jenkins
// Date: 03/35/3015
// Purpose: A generator for creating js files including, name, date, and purpose fields.
// ****************************************************************************
var generators = require('yeoman-generator');
module.exports = generators.Base.extend({
prompting: function() {
var done = this.async();
var myChoices = [this.appname, 'one', 'two', 'other'];
var prompts = {
type: 'list',
name: 'fileName',
message: 'Name of new JS file: ',
choices: myChoices
};
// Select the filename from list.
this.prompt(prompts, function(answers) {
// Store user input as an argument for the EJS preprossor.
this.context = {
fileName: answers.fileName,
};
done();
}.bind(this));
},
// Add file after filling in EJS template
copyMainFiles: function() {
// Create a time object for todays date.
var my_date = new Date();
// Add date property.
this.context.fileDate = my_date.toDateString();
// Run through EJS and create the file.
this.template("_index.js", this.context.fileName + ".js", this.context);
}
});
You can use when, to specify another field is called when by running a conditional statement. If the statement return true the field will be called else it will be skipped.
See the addition to your code:
module.exports = generators.Base.extend( {
prompting : function () {
var done = this.async();
var myChoices = [ this.appname, 'one', 'two', 'other' ];
var prompts = [ {
type : 'list',
name : 'fileName',
message : 'Name of new JS file: ',
choices : myChoices
},{
when : function ( answers ) {
return answers.fileName === 'other';
},
type : 'input',
name : 'fileName',
message : 'custom file name'
}];
// Select the filename from list.
this.prompt( prompts, function ( answers ) {
// Store user input as an argument for the EJS preprossor.
this.context = {
fileName : answers.fileName,
};
done();
}.bind( this ) );
},
// Add file after filling in EJS template
copyMainFiles : function () {
// Create a time object for todays date.
var my_date = new Date();
// Add date property.
this.context.fileDate = my_date.toDateString();
// Run through EJS and create the file.
this.template( "_index.js", this.context.fileName + ".js", this.context );
}
} );
This is my first attempt at using q.js. It appears to work, I have data being retrieved and then my function is called. The problem is the data is not being passed to the function. Is it a syntax problem or am I misusing Q?
getCategories = function (observable) {
var query = breeze.EntityQuery
.from("Categories")
.orderBy('Order');
Q(executeLocalQuery(query))
.then(processResult);
function processResult(data) { //data = undefined
if (data.results.length)
return observable(data.results)
else
return observable(create('Item', { CategoryId: id, Name: 'Add12', ImageName: 'icon.png', Order: '999' })); //create add thumbnail if zero records
};
},
executeLocalQuery = function (query) {
manager.executeQuery(query.using(breeze.FetchStrategy.FromLocalCache))
.then(localFetchSucceeded)
.fail(queryFailed);
function localFetchSucceeded(data) {
return data;
}
},
Solved it! No need to use Q when at executeLocalQuery. Changes are in the called function. Deferred waits for data.results and the resolves the defer. Then a promise is returned back to the caller. The caller can then process the .then and retrieve the data.
getCategories = function (observable) {
var query = breeze.EntityQuery
.from("Categories")
.orderBy('Order');
executeLocalQuery(query)
.then(processResult);
function processResult(data) {
if (data.results.length)
return observable(data.results)
else {
var addThumbnail = create('Category', { CategoryId: generateGUID(), Name: 'Add', ImageName: 'icon.png', Order: '999' });
observable(addThumbnail);
}
};
},
executeLocalQuery = function (query) {
var deferred = Q.defer();
manager.executeQuery(query.using(breeze.FetchStrategy.FromLocalCache))
.then(localFetchSucceeded)
.fail(queryFailed);
function localFetchSucceeded(data) {
deferred.resolve(data);
};
return deferred.promise;
},
I always have this issue in ember apps that are built on a rails backend. I have a groups.hbs template which lists out a bunch of groups, when you click on a group it loads the group.hbs template next to the groups template and changes the url to /groups/:group_id.
However, when I click the back and forward buttons, or try to manually load a url with a specific :group_id the group template fails to render and the console throws a giant
Uncaught TypeError: Object function () {
...
error.
group.js.coffee
App.Group = Ember.Object.extend()
App.Group.reopenClass
all: ->
App.ajax(
url: App.apiUrl('/groups')
).then (data) ->
console.log data
groups = []
for group in data.response
groups.addObject(App.Group.create(group))
console.log(groups)
groups
router.js.coffee
Mdm.Router.map ->
#resource 'groups', ->
#resource 'group', {path: "/:group_id"}
Mdm.Router.reopen
location: 'history'
I've never experienced this issue when building standalone ember apps. Any idea what would cause this?
EDIT
I should add that I am pulling my data from an api via XHR requests.
EDIT 2
I just explicitly created the GroupRoute and had it load all of the groups, this code is identical to the GroupsRoute. The template is still not rendering, but I no longer get that error.
GroupRoute
App.GroupRoute = Ember.Route.extend(model: ->
App.Group.all()
)
And GroupsRoute:
App.GroupsRoute = Ember.Route.extend(model: ->
App.Group.all()
)
EDIT 3
Here's the whole error if it helps anyone.
Uncaught TypeError: Object function () {
if (!wasApplied) {
Class.proto(); // prepare prototype...
}
o_defineProperty(this, GUID_KEY, undefinedDescriptor);
o_defineProperty(this, '_super', undefinedDescriptor);
var m = meta(this);
m.proto = this;
if (initMixins) {
// capture locally so we can clear the closed over variable
var mixins = initMixins;
initMixins = null;
this.reopen.apply(this, mixins);
}
if (initProperties) {
// capture locally so we can clear the closed over variable
var props = initProperties;
initProperties = null;
var concatenatedProperties = this.concatenatedProperties;
for (var i = 0, l = props.length; i < l; i++) {
var properties = props[i];
Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin));
for (var keyName in properties) {
if (!properties.hasOwnProperty(keyName)) { continue; }
var value = properties[keyName],
IS_BINDING = Ember.IS_BINDING;
if (IS_BINDING.test(keyName)) {
var bindings = m.bindings;
if (!bindings) {
bindings = m.bindings = {};
} else if (!m.hasOwnProperty('bindings')) {
bindings = m.bindings = o_create(m.bindings);
}
bindings[keyName] = value;
}
var desc = m.descs[keyName];
Ember.assert("Ember.Object.create no longer supports defining computed properties.", !(value instanceof Ember.ComputedProperty));
Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1));
if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) {
var baseValue = this[keyName];
if (baseValue) {
if ('function' === typeof baseValue.concat) {
value = baseValue.concat(value);
} else {
value = Ember.makeArray(baseValue).concat(value);
}
} else {
value = Ember.makeArray(value);
}
}
if (desc) {
desc.set(this, keyName, value);
} else {
if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) {
this.setUnknownProperty(keyName, value);
} else if (MANDATORY_SETTER) {
Ember.defineProperty(this, keyName, null, value); // setup mandatory setter
} else {
this[keyName] = value;
}
}
}
}
}
finishPartial(this, m);
delete m.proto;
finishChains(this);
this.init.apply(this, arguments);
} has no method 'find'
EDIT
So I think I figured out the problem, when you click the back button or enter a manual url it wasn't finding the obkect based on id. So I added a find() method to the Group model. Not it looks like this:
Mdm.Group = Ember.Object.extend()
Mdm.Group.reopenClass
all: ->
Mdm.ajax(
url: Mdm.apiUrl('/groups')
).then (data) ->
console.log data
groups = []
for group in data.response
groups.addObject(Mdm.Group.create(group))
console.log(groups)
groups
find: (group_id) ->
Mdm.ajax(
url: Mdm.apiUrl("/groups/#{group_id}")
).then (data) ->
renderTemplate: (data)
And my GroupRoute looks like this:
Mdm.GroupRoute = Ember.Route.extend
model: (params) ->
console.log 'oh hai'
Mdm.Group.find(params.group_id)
Now in the console when I click the back button it is loading the data but its not associating the group template with the group_id. What is the best practice way to tell ember to do this?
I'm not a rails developer but try doing something like this for the simple model/route setup you show above
App.Group = Ember.Object.extend().reopenClass
groups: []
find: ->
$.ajax
url: "/api/groups/"
type: "GET"
cache: false
dataType: "json"
beforeSend: =>
#groups.clear()
success: (results) =>
[#groups.addObject(App.Group.create(result)) for result in results]
error: =>
alert "error: failed to load the available groups"
#groups
App.Router.map ->
#resource "groups", path: "/", ->
#route "group", path: "/:group_id"