Trying to display "COLUMN_NAME" text in combobox. Here is the successful '200' response with parsed string from the browser:
[{"COLUMN_NAME":"Account","DATA_TYPE":"char"},"COLUMN_NAME":"Address","DATA_TYPE":"char"},...}]
Here is my js:
var dataSourceCustomers = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.2:6080/arcgis/rest/services/Wks/WW/MapServer/exts/RestSOE/Search%20Parameters?searchType=CUSTOMER&f=",
dataType: "jsonp",
type: 'GET'
}
},
schema: {
data: ["COLUMN_NAME","DATA_TYPE"],
}
});
dataSourceCustomers.read();
The combobox however is blank. Thanks in advance!
The problem is the definition of schema.data that you define it as an array and this is not supported. In addition and according with you example of JSON you don't need it.
And in the ComboBox you define where on each item of the array is where you have the field for the Combo.
It should be like:
var dataSourceCustomers = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.2:6080/arcgis/rest/services/Wks/WW/MapServer/exts/RestSOE/Search%20Parameters?searchType=CUSTOMER&f=",
dataType: "jsonp",
type : 'GET'
}
}
});
$("#combo").kendoComboBox({
dataSource : dataSourceCustomers,
dataTextField: "COLUMN_NAME"
})
BTW: Your example looks like JSON and not JSONP. Is it JSONP?
Related
I did the application on the sample from this lesson. Here, using DRF, a list of all added games is displayed on the page. I would really like to learn how to write a simple form of adding a new record to the database (two fields: title and description [as in the example]).
With js, I'm not very familiar with so far, so I do not know which side to get close to solving the problem.
$scope.saveUser = function(event) {
postForm({ id: 0 }, $('#FormName'), $scope, function(data) {
})
}
function postForm(postInfo, form, $scope, callback,) {
var postData = new FormData(form.get(0));
$.each(postInfo, function(key, value) {
postData.append(key, value);
});
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: postData,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
headers: {
"X-CSRFToken": app.getStorage("csrftoken")
},
beforeSend: function() {
$('#loading-image').show();
},
complete: function() {
$('#loading-image').hide();
if(typeof saveButtonId !== typeof undefined) {
$('#'+saveButtonId).removeAttr('disabled');
}
},
success: function(data) {
},
error: function(data) {
//
}
});
};
you'd be updating code in your mysite/backend folder to have some incoming route to insert data into django db using some serializer
sorry I don't have more specific details, but just wanted to convey the general idea
Here's some more information on Django serializers: http://www.django-rest-framework.org/api-guide/serializers/
another tutorial on adding an additional route to django could help
I am new at Kendo UI, I was using datatables to show values,here is my old code (Working):
$http.post("/reports/api/g3swmf/report", $scope.g3sWmf ).success(function(data){
$scope.reportVal += " - " + data;
}).then(function (response){
$scope.items=response.data;
}
And here is Kendo UI version (not Working):
$scope.g3sGridOptions = {
toolbar: ["excel"],
excel: {
allPages: true
},
dataSource: {
type: "json",
transport: {
read: {
url:("/reports/api/g3swmf/report", $scope.g3sWmf ),
type: "post",
dataType: "json"
}
},
schema: {
model: {
fields: {
poloCode: { type: "string" },
}
}
}
}
The kendo's transport url is suppose to be a string.
url:"/reports/api/g3swmf/report"
It doesn't handle the same the $http.post does. In fact, it pass the read parameter directly to jquery.ajax.
There's 2 way to solve this.
Use a string url for your transport
Define your transport.read as a function. You'll then be able to call you're own $http.post. If you define a function, note that kendo will provide a event parameter with some callback methods that should be used to send the data back to the grid.
Here's a custom read example:
read: function (readOptions) {
$http.post("/reports/api/g3swmf/report", $scope.g3sWmf ).success(function(data){
readOptions.success(data);
})
}
Please refer to kendo dataSource API documentation for more details
I create one store and init it with some params with one array.when I execute the load function, the array parameter becomes a string '[object object]'
the code as follows:
store:
Ext.define('test.store.info',{
extend: 'Ext.data.Store',
config:{
model:'test.model.info',
proxy:{
type:'ajax',
url:'http://domain/path',
actionMethods:'POST'
}
}
});
model:
Ext.define('test.model.info',{
extend:'Ext.data.Model',
config:{
fields:[
'code',
'data'
]
}
})
use in controller:
var store = Ext.getStore('info');
params = {
t1:[{
f1:'aa'
},{
f2:'bb'
}],
t2:'ddd'
}
console.log(params)
store.load({
params:params
});
or I just use Ajax function instead load function , the result is the same.
Ext.Ajax.request({
url:'http://domain/path',
method:'post',
params:params,
});
I check the xhr within network of browser , it is a string as follows:
t1:[object Object]
t1:[object Object]
t2:ddd
when I check the server log, it shows :
t1:'[object Object]'
t1:'[object Object]'
t2:'ddd'
I found the solution , thank you
1, just use jsonData instead params during Ajax, like follows:
Ext.Ajax.request({
url: ajmd.util.version.getHost()+'/archimedes/update/selfInfo',
method:'post',
// params:params,
jsonData:params
});
2, or just encode the data before send
params.t1 = Ext.encode(params.t1);
If you name the parameter "foo[]", then it will encode it as a POST array making it easy to consume on the server side. Note the [] at the end.
var companies = [1,2,3];
Ext.Ajax.request({
url: '...',
method: "post",
params: {
'companies[]': companies,
},
success: function (response) {
console.log("done");
}
});
New to Sencha, I am using the following code to try to get JSON data. For some reason, it returns null, yet I know the URL is returning values, as I am using it in another project.
// Make the JsonP request
Ext.data.JsonP.request({
url: 'http://xxx.azurewebsites.net/login',
crossDomain: true,
type: "GET",
dataType: "json",
callbackKey: 'jsoncallback',
callback: function(successful, data ) {
alert( JSON.stringify(data) );
}
});
Can someone please point out what I am missing.
You need to add scope:this property to call callback function, try like this.
Ext.data.JsonP.request({
url: 'http://xxx.azurewebsites.net/login',
crossDomain: true,
type: "GET",
dataType: "json",
callbackKey: 'callback',
scope: this,
callback: function (response, value, request) {
var result = Ext.decode(response.responseText);
alert(result.propertyName);
}
});
Morning,
I have created a store in my controller like this:
var storeCompanies = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
type: 'GET',
url: url+'dashboard?Uid='+uid+'&Ude='+ude,
reader: {
type: 'json',
root: 'root',
totalProperty: 'total'
},
headers: {
'Accept' : 'application/json;application/x-www-form-urlencoded',
'Content-Type' : 'application/x-www-form-urlencoded',
},
}),
root: 'd',
type: 'localstorage',
autoLoad : true,
id: 'company_Id',
scope : this,
fields: ['Name']
});
console.log(storeCompanies);
The console log shows that the store is being created and populated properly. I need to retrieve all the values for a dropdown.
I tried this but it returned undefined.
All other info I have found seems to instruct on how to find just one value.
What's the easiest and most effecient way to retrieve all the data?
storeCompanies.on('load', function() {
console.log(storeCompanies.data); //<--- data is a Ext.util.MixedCollection
});
If you need to retrieve all the values in the JSonStore you could use each(). Here's an example: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.JsonStore-method-each
Thanks to #Vlad for his input. Here is what I settled on:
storeCompanies.on('load', function() {
numcomps = storeCompanies.data.items.length; //get number of elements in store
for(var ic = 0;ic<numcomps;ic++){
console.log(storeCompanies.data.items[ic].raw);
}
});