binding dojo.grid to restful service with authentication via jsonreststore - javascript

I searched a while for this issue, but could not find much about it.
In my javascript application I try to visualize data of my restful backend via jsonreststore and dgrid.
That is what I got so far:
<script>
function getRequest(args) {
return {
url: 'http://myworkingapiwithevents/events',
handleAs: 'json',
sync: false,
headers: {
'Authorization': 'Basic HriB5jsHUib2K='
}
}
}
require(["dojo/store/JsonRest", "dojo/rpc/JsonService"], function (JsonRest, JsonService) {
service = new JsonService('http://myworkingapiwithevents/events', true /*isJson*/, undefined /*schema*/, getRequest);
myStore = new JsonRest({ service: service });
});
require(["dojox/grid/DataGrid", "dojo/data/ObjectStore", "dojo/domReady!"
], function (DataGrid, ObjectStore) {
grid = new DataGrid({
store: dataStore = new ObjectStore({ objectStore: myStore }),
structure: [
{ name: "Event", field: "name", width: "200px" }
]
}, "grid3");
grid.startup();
});
</script>
For the beginning I use a hardcoded base64 authorization which should work for my backend service. With the getRequest method I initialize my service "workaround" with which my jsonreststore can handle the authorization.
In firebug (Chrome) I get the following errors:
ErrorCtor {stack: "Error: Unable to load http://myworkingapiwithevents/ev... p://localhost:52894/Scripts/dojo/dojo.js:1094:43)", message: "Unable to load http://myworkingapiwithevents/events status: 0", response: Object, status: 0, responseText: ""…}
Error {popStackFrame: function} "Error: Unable to load SMD from http://myworkingapiwithevents/events
Could it be some cross domain issue? I know that my backendservice supports cross domain.

You don't need to use dojo/rpc/JsonService. Try this instead :
require(["dojo/store/JsonRest", "dojox/grid/DataGrid", "dojo/data/ObjectStore", "dojo/domReady!"], function (JsonRest, DataGrid, ObjectStore) {
var restStore = new JsonRest({
target : 'http://myworkingapiwithevents/events',
headers: {'Authorization': 'Basic HriB5jsHUib2K='}
});
var dataStore = new ObjectStore({ objectStore : restStore });
grid = new DataGrid({
store: dataStore,
structure: [
{ name: "Event", field: "name", width: "200px" }
]
}, "grid3");
grid.startup();
});

Related

Ember-data "Assertion Failed: Error: Assertion Failed: The response from a findAll must be an Array, not undefined"

I have been stuck on this issue for quite awhile now. I have thoroughly researched the issue on stackoverflow and was unable to find a solution.
I am trying to load JSON data into my application store with ember-data and a rails API. I am using ember-cli.
The error I am continuing to get is: Assertion Failed: Error: Assertion Failed: The response from a findAll must be an Array, not undefined
The application consists of several reports that each have charts. The server fires off a request to the API (with a uuid tacked on as a query string) and receives the following json response:
{
reports: [
{
id: 1,
name: "Report 1",
description: "Test Report 1",
display_order: 0,
chart_ids: [
1
]
},
{
id: 2,
name: "Report 2",
description: "Test Report 2",
display_order: 1,
chart_ids: [
5,
6
]
}
]
}
This is the route for reports:
export default Ember.Route.extend({
setupController: function(controller) {
controller.set('model', this.store.find('report'));
}
});
And my models:
var Report = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
displayOrder: DS.attr('integer'),
charts: DS.hasMany('chart', { async: true })
});
var Chart = DS.Model.extend({
reports: DS.belongsTo('report'),
config: DS.attr()
});
I am using an ActiveModelAdapter and an ActiveModelSerializer:
ApplicationAdapter:
export default DS.ActiveModelAdapter.extend({
namespace: 'api',
ajax: function(url, type, hash) {
if (Ember.isEmpty(hash)) {
hash = {};
}
if (Ember.isEmpty(hash.data)) {
hash.data = {};
}
hash.data.uuid = $.cookie('uuid');
this._super(url, type, hash);
}
});
And serializer:
export default DS.ActiveModelSerializer.extend();
I'm so frustrated at the moment. Ember debugger isn't being very helpful. Any help would be super appreciated.
Let me know if any more info would be helpful.
I'm pretty sure this needs to be charts_ids instead of chart_ids (note the s after chart) in the JSON response for reports.
or change your hasMany to chart (though that seems weird)
var Report = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
displayOrder: DS.attr('integer'),
chart: DS.hasMany('chart', { async: true })
});
You're not returning the ajax.
App.ApplicationAdapter= DS.ActiveModelAdapter.extend({
namespace: 'api',
ajax: function(url, type, hash) {
if (Ember.isEmpty(hash)) {
hash = {};
}
if (Ember.isEmpty(hash.data)) {
hash.data = {};
}
hash.data.uuid = $.cookie('uuid');
return this._super(url, type, hash);
}
});
http://emberjs.jsbin.com/OxIDiVU/678/edit

Name of Azure blob/filename when uploading

When I upload to azure container the filename that is saved is the uuid(guid) how can I change that?
I create the signatur by using the querystring "bloburi" added in the signature request.
$("#fine-uploader").fineUploaderAzure({
autoUpload : true,
debug: true,
validation: {
itemLimit: 10,
sizeLimit: 209715200 // 200 mb
},
resume: {
enabled: true,
id: 'ResumeUpload',
cookiesExpireIn: 7
},
extraButtons: {
folders: true
},
deleteFile: {
enabled: true
},
request: {
endpoint: 'https://xxx.blob.core.windows.net/'
},
cors: {
//all requests are expected to be cross-domain requests
expected: true,
//if you want cookies to be sent along with the request
sendCredentials: true
},
signature: {
endpoint: '/sig/'
},
uploadSuccess: {
endpoint: '/success'
}
});
The docs are wrong.
For version 4.4.0 the correct property to set is:blobProperties
// 'uuid', 'filename', or a function which may be promissory
blobProperties: {
name: "uuid"
},
I know this is an old question, but I ran into the same problem. You'll need to pass a Promise to get it to work:
name: function (id) {
return new Promise(function (resolve) {
resolve("The String You Want to Pass");
});
}
The default value for the name option is 'uuid' which will set the filename in Azure to the uuid. You can instead set it to 'filename' to have the object stored under the filename, or provide a function that will create some other name.
blobProperties: {
name: 'filename'
}
From my experience, the best method for generating filenames is to save the filename under a unique id subfolder. This guarantees that you save the original filename, and that there are no naming collisions.
blobProperties: {
name: function(id) {
var uuid = this.getUuid(id),
filename = this.getName(id);
return uuid + '/' + filename;
}
}

extjs ServerProxy error on save

I'm trying to update a field value from a grid row icon. But I get this error:
Uncaught Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.
I'm using a RestProxy, this is the store definition:
Ext.define('SF.store.Contents', {
requires: [
'SF.Config',
'SF.store.RestProxy'
],
extend: 'Ext.data.Store',
model: 'SF.model.Content',
autoLoad: false,
proxy: Ext.create('SF.store.RestProxy', {
url: (new SF.Config()).getApiBaseUrl() + "admin/contents"
}),
});
column code on GridPanel definition
....
store: 'Contents',
.....
{ xtype: 'actioncolumn', header: 'Action'
, width: 40
, items: [{ // Delete button
icon: '......./cancel.png'
, handler: function(grid, rowIndex, colindex) {
var record = grid.getStore().getAt(rowIndex);
record.set('status',6);
record.save(); //THIS CALL THROWS THE ERROR
grid.store.remove(record);
}
},......
In addition, the proxy is working fine for GET request. Does anyone knows what should I define on the proxy?
I've read the official doc but it is not clear for me.
You have to provide a proxy for you model. In the button´s handler you are calling the model's save method (SF.model.Content) then, your SF.model.Content model has to provide a proxy.

ExtJS store/proxy doesn't send delete method to server

I'm trying to create simple ExtJs application that manages Users and User's Roles. Set of REST services provide this functionality on back end.
When I assign a new Role to a User, appropriate data store sends POST (create) requests to the service. However when I remove existing Role from a User, it's removed only from store locally without sending DELETE request to the service.
Here is my code:
Model:
Ext.define('UserRole', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', mapping: "Id" },
{ name: 'RoleId', mapping: "RoleId" },
{ name: 'UserId', mapping: "UserId" }
]
});
Store With proxy:
Ext.define('UserRoleStore', {
extend: 'Ext.data.Store',
model: 'UserRole',
autoload: false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'd.results'
},
api: {
read: '/accessmanager.svc/Users(\'{userid}\')/Roles?$format=json',
create: '/accessmanager.svc/UserRoles?$format=json',
update: '/accessmanager.svc/UserRoles?$format=json',
destroy: '/accessmanager.svc/UserRoles?$format=json'
},
updateApiUrlWithUserId: function (userId) {
this.api.read = this.api.read.replace('{userid}', userId);
}
}
});
Method that based on selected checkboxes updates the UserRole store
var chekboxes = Ext.ComponentQuery.query('userdetails #roleslist')[0];
var selectedUserId = this.selectedUserId;
var selectedUserRoleStore = this.selectedUserRoleStore;
Ext.each(chekboxes.items.items, function (cb) {
var exists = false;
Ext.each(selectedUserRoleStore.data.items, function (cs) {
if (cs.data.RoleId === cb.inputValue) {
exists = true;
}
});
if (cb.getValue() && !exists) {
var newRole = Ext.create('UserRole', { RoleId: cb.inputValue, UserId: selectedUserId });
selectedUserRoleStore.add(newRole);
} else if (exists && !cb.getValue()) {
// delete existing role
var record = selectedUserRoleStore.findRecord("RoleId", cb.inputValue);
selectedUserRoleStore.remove(record);
}
});
selectedUserRoleStore.sync();
Presumably your Id field is assigned on the server end when record is created. Correct? First try to specify idProperty: 'Id' in the model. Default value for this is 'id' but I think these are case sensitive.
Using idProperty ExtJs recognizes records as being 'dirty' and required to be updated on the server end.
The issue is your proxy needs to be a specialized REST type:
proxy: {
type: 'rest',
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Rest
Also, you will probably be able to use the buildURL method to replace your own updateAPI... method.

Sencha Touch - Error - JSON Recovery

I contact you because I'm in a deadlock.
I try to get data from a extern web service with "ScriptTag" but it does not work because the web service returns simple json format (No JSONP).
Do you know if there is a another way to retrieve json using sencha ?
var helloWorld = new Ext.Application({
Parking: Ext.regModel('Parking', {
fields:[
{name:'parkingName'},
{name:'latitude'},
{name:'longitude'},
{name:'mapUrl'}
],
}),
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'JSON Recovery'}],
tabBar: {
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{cls:'Page1', title:'Page1', html:'Page1'},
{
cls: 'list',
title: 'Page2',
xtype: 'list',
loadingText: 'Chargement',
itemTpl:'<div>{parkingName}</div>',
store: new Ext.data.Store({
autoLoad:true,
model: 'Parking',
proxy: {
type: 'scripttag',
url : 'http://walker.hotcity.lu/hotcity-central-server/webresources/parking/json?format-version=1_0&client-type=iPhone',
reader: {
type: 'json',
root: 'remoteObject'
},
}
}),
},
],
});
}
});
warning : Resource interpreted as Script but transferred with MIME type application/json.
error : Uncaught SyntaxError: Unexpected token :
Thank You.
Kevin.
What you are looking for is the Ajax Proxy. There are some examples in the docs about how to use it, and how to configure it. The default reader is JSON so as long as your model matches up with the information retrieved via JSON then you will be alright.
The other thing you should be aware of is that, JSONP can get around cross site scripting, but if you are not deploying to the walker.hotcity.lu domain, then the browser will not allow the request due to the same origin policy. The server will have to respond with the proper CORS headers to allow your app to access the data.

Categories

Resources