Differences between using json and jsonP - ajax

i had a simple controller to update my truck list in my db. Iniatially it had been working with jsonP(because my server was in another domain), and it worked fine, but then i had joined the php scripts(to manage crud in db) in the same domain and i had changed to ajax proxy. The problem is that i had noticed although ajax proxy sends POST request... i never get anything... (These never occurs with jsonp, because it sent GET request i think). So, is there anything i had forgotten or i must do?
Let me show my store before and after the upgrade:
BEFORE:
Ext.define('myapp.store.ListaCamiones', {
extend: 'Ext.data.Store',
requires: [
'myapp.model.Camion'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'myapp.model.Camion',
storeId: 'ListaCamiones',
proxy: {
type: 'jsonp',
api: {
read: 'http://myapp.localhost/camion/listar',
write: 'http://myapp.localhostt/camion/guardar/',
update: 'http://myapp.localhost/camion/guardar/',
destroy: 'http://myapp.localhost/camion/eliminar/'
},
url: 'http://myapp.localhost/camion/listar',
reader: {
type: 'json',
root: 'listacamion'
},
writer: {
type: 'json',
root: 'listacamion'
}
}
}, cfg)]);
}
});
AFTER:
Ext.define('myapp.store.ListaCamiones', {
extend: 'Ext.data.Store',
requires: [
'myapp.model.Camion'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'myapp.model.Camion',
storeId: 'ListaCamiones',
proxy: {
type: 'ajax',
url: '/camion/listar',
api: {
read: '/camion/listar',
write: '/camion/guardar/',
update: '/camion/guardar/',
destroy: '/camion/eliminar/'
},
reader: {
type: 'json',
root: 'listacamion'
},
writer: {
type: 'json',
root: 'listacamion'
}
}
}, cfg)]);
}
});
This is what i got from chrome debug:
Connection:Keep-Alive
Content-Length:0
Content-Type:application/x-json
Date:Mon, 01 Jul 2013 15:40:38 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.2.22 (Ubuntu)
X-Powered-By:PHP/5.4.9-4ubuntu2
I hope you can help me to understand what is happening . Thank you in advance

try changing your proxy type to 'rest'

Related

Ext JS store sync change method

Is it possible to change the dafault methos POST that a store snync() request uses.
I have tried the following but it did not work. I would like to change the method from POST to PUT.
I am aware I can write a custom Ajax request but is there a way to do this with the store sync() functionallity?
store.sync({
method: 'PUT',
scope:this,
callback: function(batch, options){
},
success : function(batch, options) {
},
failure : function(batch, options) {
}
});
}
I have also tried this kind of approach without success:
store.getProxy().method = 'PUT';
In the proxy config for your store, you can configure the api to make specific request methods for each type of action.
For example:
proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
},
batchActions: false,
api: {
create: 'foo/sample.json',
read: 'bar/sampleB.json',
update: 'test/test.json',
destroy: 'admin/testa.json'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
}
EDIT
The code above gets generated from Sencha Architect, but if you are not using Architect you could define the api actions on your REST proxy like this:
proxy: {
type: 'rest',
api: {
create: {url: 'foo/sample.json', method: 'POST'},
read: {url: 'bar/sampleB.json', method: 'GET'},
update: {'test/test.json', method: 'PUT'},
destroy: {'admin/testa.json', method: 'POST'}
}
}

Getting data from web service using ajax

I'm trying to get data from a webservice using ajax and POST method.
Ext.Ajax.request({
url: 'http://localhost......',
method:'POST',
success: function(response) { console.log(response.responseText); },
failure: function() { Ext.Msg.alert('Fail'); },
jsonData:{
/*Here I specify my request json*/
}
}
});
The above thing works fine but when i try to mimic the same in EXTJS store it responds with a error
he server responded with a status of 415 (Unsupported Media Type)
EXTJS STORE CODE
Ext.define('IWM.store.JsonTest', {
extend: 'Ext.data.Store',
autoLoad: true,
fields:['Name'],
proxy: {
type: 'ajax',
method : 'POST',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
jsonData:{
/*JSON */
}
},
url: 'http://localhost......',
success: function(response) { console.log(response.responseText); },
failure:function(){console.log("failed");},
reader: {
type: 'json',
root: 'result',
successProperty: 'success'
}
}
});
First things first, try to change store config as below.
var IWMStore = new Ext.data.JsonStore({
// it seems to me you had forgotten model
model: 'YourDataModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://your-url-address',
reader: {
type: 'json',
root: 'json-root-value',
idProperty: 'unique-property-in-json-file'
}
}
});
Example JSON value :
// here, ctgMains is the root value, CUST_ASSORT_SECTION_ID is the idProperty
{"ctgMains":[{"CUST_ASSORT_SECTION_ID":"1","CTG_SECTION":"HORECA"},{"CUST_ASSORT_SECTION_ID":"7","CTG_SECTION":"SCO"},{"CUST_ASSORT_SECTION_ID":"3","CTG_SECTION":"TRADER"}]}
Second Attempt :
Try to add headers property in your proxy definition, like below:
proxy: {
type: 'ajax',
url: 'http://your-url-address',
reader: {
type: 'json',
root: 'json-root-value',
idProperty: 'unique-property-in-json-file'
},
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
}
}
Following on from Oğuz Çelikdemir's answer, you may need to define a json writer for your proxy.
proxy: {
type: 'ajax',
url: 'http://your-url-address',
reader: {
type: 'json',
root: 'json-root-value',
idProperty: 'unique-property-in-json-file'
},
writer: {
type: 'json'
}
}
That should set the json mediatype header (assuming that's what your request is expecting).

Kendo Grid calls 'create' operation instead of 'update' after adding new record

I've setup a basic Kendo Grid and I'm using the DataSourceResult class from the PHP Wrapper library on the sever side.
I've come across a strange issue... if I create a new record and then edit it (without refreshing the page), the create operation is called again, rather than the update operation.
If the page is refreshed after adding the new record, the update operation is called correctly after making changes to the record.
I can confirm that the DataSourceResult class is returning the correct data after the create operation, including the id of the new record.
Any ideas why this is happening (and how to stop it)?
Thanks
Update: Here's the datasource code. The query string in the url is just to easily distinguish the requests in Chrome's console. The additional data passed with each request is used by ajax.php to distinguish the different actions requested.
data = new kendo.data.DataSource({
transport: {
create: {
url: '/ajax.php?r=gridCreate',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'create' }
},
read: {
url: '/ajax.php?request=gridRead',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'read' }
},
update: {
url: '/ajax.php?r=gridUpdate',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'update' }
},
destroy: {
url: '/ajax.php?r=gridDestroy',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'destroy' }
},
parameterMap: function(data, operation) {
if (operation != "read"){
data.expires = moment(data.expires).format('YYYY-MM-DD HH:mm');
}
return data;
}
},
schema: {
data: 'data',
total: 'total',
model: {
id: 'id',
fields: {
id: { editable: false, nullable: true },
code: { type: 'string' },
expires: { type: 'date' },
enabled: { type: 'boolean', defaultValue: true }
}
}
},
pageSize: 30,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
Best solution
Set to update, create or delete different Call Action
From Telerik Support :
I already replied to your question in the support thread that you
submitted on the same subject. For convenience I will paste my reply
on the forum as well.
This problem occurs because your model does not have an ID. The model
ID is essential for editing functionality and should not be ommited -
each dataSource records should have unique ID, records with empty ID
field are considered as new and are submitted through the "create"
transport.
schema: {
model: {
//id? model must have an unique ID field
fields: {
FirstName: { editable: false},
DOB: { type: "date"},
Created: {type: "date" },
Updated: {type: "date" },
}
} },
For more information on the subject, please check the following
resources:
http://docs.kendoui.com/api/framework/model#methods-Model.define
http://www.kendoui.com/forums/ui/grid/request-for-support-on-editable-grid.aspx#228oGIheFkGD4v0SkV8Fzw
MasterLink
I hope this information will help
I have also the same problem & I have tried this & it will work.
.Events(events => events.RequestEnd("onRequestEnd"))
And in this function use belowe:
function onRequestEnd(e) {
var tmp = e.type;
if (tmp == "create") {
//RequestEnd event handler code
alert("Created succesully");
var dataSource = this;
dataSource.read();
}
else if (tmp == "update") {
alert("Updated succesully");
}
}
Try to Use this code in onRequestEnd event of grid
var dataSource = this;
dataSource.read();
Hope that it will help you.
Pass the auto-incremented id of the table when you call the get_data() method to display data into kendo grid, so that when you click on the delete button then Deledata() will call definitely.
Another variation, in my case, I had specified a defaultValue on my key field:
schema: $.extend(true, {}, kendo.data.transports["aspnetmvc-ajax"], {
data: "Data",
total: "Total",
errors: "Errors",
model: kendo.data.Model.define({
id: "AchScheduleID",
fields: {
AchScheduleID: { type: "number", editable: true, defaultValue: 2 },
LineOfBusinessID: { type: "number", editable: true },
Not sure what I was thinking but it caused the same symptom.

Kendo DataSource reads my remote database but won't save things to it

It can Read the remote database, it can Create new items locally, but they don't actually save to the remote database. This is what adds a new item:
function addNewItem(){
dataSource.add({id:"0", petName:"Dusty", petSpecies:"Dog", petGender:"M"});
dataSource.sync();
}
$('#addPet').bind('click', addNewItem);
This ajax POST call in that function instead of the dataSource stuff adds to my database perfectly:
var object = { id:"0", petName:"Dusty", petSpecies:"Dog", petGender:"M" };
$.ajax({
type: "POST",
url: 'website/petData',
headers: { "Authorization" : "Bearer ${AccessToken}" },
contentType: "application/json",
data: JSON.stringify(object)
})
Here is my datasource code. What do I need to change? I've tried doing sooooo many different things but no luck yet.
var dataSource = new kendo.data.DataSource({
type: "everlive",
transport: {
typeName: 'petData',
read: {
url: "website/petData",
dataType: "jsonp"
},
create: {
url: 'website/petData',
dataType: "jsonp"
}
},
group: "petSpecies",
schema: {
model: {
id: "id",
fields: {
id: { type: "number"},
petName: { type: "text" },
petSpecies: { type: "text" },
petGender: { type: "text" }
}
}
}
});
So thanks to giltnerj0 and Brett's comments, I was able to google the right words, and discovered that all I needed to do was change create's dataType:jsonp to json. I'm getting some POST errors now, but it's POSTing finally and saving things to my database.
create: {
url: 'website/petData',
dataType: "json"
}

I'm having trouble with ExtJS4 passing a querystring (parameter) with store.load

I'm having trouble passing parameters into the GetAll method of my controller. I tried Filter as below but no luck. any suggestions?
Ext.define('AM.store.Sessions', {
extend: 'Ext.data.Store',
model: 'AM.model.Session',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'Session/GetAll',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'Data',
successProperty: 'success'
},
filters: [
new Ext.util.Filter({
property: 'eyeColor',
value: 'brown'
})
]
}
});
Im not sure what you are after. But stating extraParams in you proxy will put that parameter on every load() on your store. Like this.
Ext.define('AM.store.Sessions', {
extend: 'Ext.data.Store',
model: 'AM.model.Session',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'Session/GetAll',
update: 'data/updateUsers.json'
},
extraParams:{
eyeColor:'brown'
}
reader: {
type: 'json',
root: 'Data',
successProperty: 'success'
}
}
});
You could also listen on the "beforeLoad" event on the store and modifu parameters there.
OR.. you could just pass parameters to the load() function as this
var myStore = Ext.create('AM.store.Session');
myStore.load({
params:{
eyeColor:'brown'
}
})

Resources