PDA

View Full Version : Problem with sending json data to the server



madmax4000
20 Jul 2009, 5:38 AM
Hello Everybody,

I have a problem with sending my store data to the server.
The problem is not that the data is not send to the server, but I do not get the complete data. The store data is not a simple list it's more one complex item. here is my store code:




var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true // write all fields, not just those that changed
});
Ext.ux.CommunityStore = new Ext.data.JsonStore({
id:'communityID',
root:'answer',
totalProperty:'totalCount',
encode:false,
autoSave : true,
proxy: new Ext.data.ScriptTagProxy({
url:kmControllerUrl (http://extjs.com/forum/kmControllerUrl),
callback : loadCommunityStore,
method: 'POST',
api: {
save: {
url: kmControllerUrl,
method: 'POST'
},
update: {
url: kmControllerUrl,
method: 'POST'
}
}
}),
writer: writer,
fields:[
'communityID',{
'community':[{
'IViewsOfAllColumnsUnsorted':[{
'IViews': [{
name: "collapsable",
type: 'boolean'
}, {
name: "collapsed",
type: 'boolean'
}, 'community', 'iviewid', 'language', 'market', {
name: "moveable",
type: 'boolean'
}, {
name: "moved",
type: 'boolean'
}, 'name', 'pcdpath', {
name: "personalposition",
type: 'int'
}, {
name: "position",
type: 'int'
}, {
name: "removed",
type: 'boolean'
}]
}]
},{'columns':[
{
'IViews': [{
name: "collapsable",
type: 'boolean'
}, {
name: "collapsed",
type: 'boolean'
}, 'community', 'iviewid', 'language', 'market', {
name: "moveable",
type: 'boolean'
}, {
name: "moved",
type: 'boolean'
}, 'name', 'pcdpath', {
name: "personalposition",
type: 'int'
}, {
name: "position",
type: 'int'
}, {
name: "removed",
type: 'boolean'
}]
},'columnid']
},'layout']
}],
listeners: {
beforewrite : function( DataProxy , action, RecordArray, options, arg ){
alert("before write");
},
datachanged : function( Store ){
//alert("data changed");
},
update : function( Store , record, operation ) {
alert("updated");
},
beforeload : function( Store , options ){
//debugger;
//alert('before load!');
},
loadexception: function( thiss, options, response, e ) {
//console.warn(store);
//console.warn(options);
//console.warn(response);
//console.warn(e);
//debugger;
alert('loadexception!');
},
load: function(store, records, options ) {
//debugger;
//alert('load!');
if(Ext.ux.CommunityStore.getTotalCount()>0){
var Columns = Ext.ux.CommunityStore.reader.jsonData.answer[1].community[0].columns
for(i=0;i<Columns.length;i++){
var newPortal= Ext.ux.pagelayout.add({
xtype:'portal',
margins:'35 5 5 0',
items:[]

});
var newColumn = newPortal.add({
columnWidth:1,
id:Columns[i].columnid,
style:'padding:10px'
});
var iViews = Columns[i].IViews;
for(j=0;j<iViews.length;j++){
newColumn.add({
title: iViews[j].name,
id: iViews[j].pcdpath,
html: '<DIV unselectable="on" ><IMG class="x-tree-node-icon com_sapportals_portal_iview" src="http://extjs.com/s.gif" unselectable="on"><SPAN id=extdd-27 unselectable="on">call tinyMCE HomePage</SPAN></DIV>'
});
}
}
}

Ext.ux.pagelayout.doLayout();
}

},
baseParams: {
userMarket: 'communitypage',
userBusiness: 'communitypage',
community: 'communitypage',
subCommunity: 'communitypage',
communityPage: 'communitypage',
mode: 'communitypage'
}
});
function loadCommunityStore(data){
Ext.ux.CommunityStore.loadData(data);
}


When I save the data, the store data looks like this:

JSON.stringify(Ext.ux.CommunityStore.reader.jsonData, function (key, value) { return value; }):

"{"totalCount":1,"answer":[{"communityID":"hr_recruitment_group_food"},{"community":[{"IViewsOfAllColumnsUnsorted":[{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/XX/KMR_GLB_EPCXA_ZONE4_XX_RECRUITMENT_WHATWEDO","language":"de,en","market":"","moveable":true,"moved":false,"name":"GLB Recruitment - What we do","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/XX/KMR_GLB_EPCXA_ZONE4_XX_RECRUITMENT_WHATWEDO","personalposition":0,"position":2,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_APPLY","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Apply","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_APPLY","personalposition":0,"position":0,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/HQ/KMR_GLB_EPCXA_ZONE4_HQ_RECRUITMENT_WHATWEDO","language":"de,en","market":"HQ","moveable":true,"moved":false,"name":"HQ Recruitment - What we do","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/HQ/KMR_GLB_EPCXA_ZONE4_HQ_RECRUITMENT_WHATWEDO","personalposition":0,"position":1,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_REFERRAL","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Referral","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_REFERRAL","personalposition":0,"position":3,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_CONTACTS","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Contacts","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_CONTACTS","personalposition":0,"position":4,"removed":false},{"collapsable":false,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCIES","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Vacancies","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCIES","personalposition":0,"position":1,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCY_TEAM","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"Recruitment - Vacancy team","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCY_TEAM","personalposition":0,"position":2,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_WHATWEDO","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - What we do","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_WHATWEDO","personalposition":0,"position":0,"removed":false}],"columns":[{"IViews":[{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_WHATWEDO","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - What we do","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_WHATWEDO","personalposition":0,"position":0,"removed":false}],"columnid":"column1"},{"IViews":[{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/HQ/KMR_GLB_EPCXA_ZONE4_HQ_RECRUITMENT_WHATWEDO","language":"de,en","market":"HQ","moveable":true,"moved":false,"name":"HQ Recruitment - What we do","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/HQ/KMR_GLB_EPCXA_ZONE4_HQ_RECRUITMENT_WHATWEDO","personalposition":0,"position":1,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/XX/KMR_GLB_EPCXA_ZONE4_XX_RECRUITMENT_WHATWEDO","language":"de,en","market":"","moveable":true,"moved":false,"name":"GLB Recruitment - What we do","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/XX/KMR_GLB_EPCXA_ZONE4_XX_RECRUITMENT_WHATWEDO","personalposition":0,"position":2,"removed":false}],"columnid":"column2"},{"IViews":[{"collapsable":false,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCIES","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Vacancies","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCIES","personalposition":0,"position":1,"removed":false}],"columnid":"column3"},{"IViews":[{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_APPLY","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Apply","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_APPLY","personalposition":0,"position":0,"removed":false}],"columnid":"column4"},{"IViews":[],"columnid":"column5"},{"IViews":[{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCY_TEAM","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"Recruitment - Vacancy team","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_VACANCY_TEAM","personalposition":0,"position":2,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_REFERRAL","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Referral","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_REFERRAL","personalposition":0,"position":3,"removed":false},{"collapsable":true,"collapsed":false,"community":"","iviewid":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_CONTACTS","language":"de,en","market":"UK","moveable":true,"moved":false,"name":"UK Recruitment - Contacts","pcdpath":"pcd:portal_content/Test_Content_Folders/Bernard/iViews/EMP_PORTAL_ZONE4/UK/KMR_GLB_EPCXA_ZONE4_UK_RECRUITMENT_CONTACTS","personalposition":0,"position":4,"removed":false}],"columnid":"column6"}],"layout":"pcd:portal_content/templates/layouts/layout_6col_T_drag_drop"}]}]}"

But on the server the "answer" is :
"request.getParameter("answer")"= "{"communityID":"hr_recruitment_group_food","id":"hr_recruitment_group_food"}"

So the comple object "community" is missing.

I tried to workaround and send the parameter direktly:
Ext.ux.CommunityStore.baseParams.communityPage = JSON.stringify(Ext.ux.CommunityStore.reader.jsonData, function (key, value) { return value; });

But now the variable seems to be to long, so no Ajax call was executed. If I used a test value for baseParams.communityPage, this works without problems.

So my next Idea was that this could be because it's a GET Request and not a POST, so I tried to configure the ScriptTagProxy to post the data, but this doesn't work. I found a Thread http://extjs.com/forum/showthread.php?p=334766 . Is this the reason why it does not work to post the request?

Please, let me know if you need any more information.
Thanks for your help!!!

madmax4000
22 Jul 2009, 4:36 AM
Hello everybody,

If I forget something to explain to understand my problem
or if I did a newbe mistake, please post your questions.
If you have any idea, how to solve my problem please give me a hint.

Thanks

Axel

madmax4000
23 Jul 2009, 1:31 AM
Hello Everybody,

I found my Problem, I diden't understood the scripttagproxy completly, ofcause a POST cannot work... And the params are too long for GET.
So the only solution is a IFrameProxy to get this working. I could do a domain relaxing because the base url is equal ab.cd.com to ef.cd.com, maybe that helps me to get the communication running.
If someone has a code snippet of suche an POST - iframe solution, that would be genius.

Thanks

Axel

madmax4000
27 Jul 2009, 4:57 AM
Hello Everybody,
here my final solution for everyone who has got the similar problems.
The solution is based on Animal's IFrameProxy from http://extjs.com/forum/showthread.php?t=12852
In general I added a dummy store to submit my data, because i just want to send data, not update my real store, but you should be able to use the IFrameProxy for updating as well (I read already the response).
To read the response you need to be in the same domain or at least in the same parent domain. If you are in the same parent domain, use domain relaxing:


var x=location.hostname.indexOf('.')+1;
if(x>0) document.domain=location.hostname.substring(x);

My problem was, that this proxy still send a "GET" to load the iFrame, so I modified the proxy:
I added a form which post all data to the url.

// Usage: new Ext.data.IframeProxy({url: "http://www.example.com/getXML"});
Ext.data.IframeProxy = function(config) {
Ext.data.IframeProxy.superclass.constructor.call(this);
Ext.apply(this, config);
};
Ext.extend(Ext.data.IframeProxy, Ext.data.DataProxy, {
load: function(params, reader, callback, scope, arg){
if(this.fireEvent("beforeload", this, params) !== false){
var o = {
frameId: Ext.id(),
formId: Ext.id(),
params : params || {},
request: {
callback : callback,
scope : scope,
arg : arg
},
reader: reader,
callback : this.loadResponse,
scope: this
};
o.cb = this.loadResponse.createDelegate(this, [o], 0);
o.frame = document.createElement('iframe');
try {
o.frame = document.createElement('<iframe name="'+o.frameId+'">');
} catch (ex) {
o.frame = document.createElement('iframe');
o.frame.name=o.frameId;
}
o.frame.id = o.frameId;
o.frame.className = 'x-hidden';
//o.frame.src = this.url;
if(Ext.isIE){
// document.frames[o.frameId].name = o.frameId;
}
Ext.EventManager.on(o.frame, 'load', o.cb);
document.body.appendChild(o.frame);
o.form=document.createElement('form');
o.form.action=this.url;
o.form.method="POST";
o.form.id = o.formId;
o.form.name = o.formId;
o.form.target = o.frameId;
document.body.appendChild(o.form);
var formElement=document.getElementById(o.formId);
for (var property in params) {
if ( params.hasOwnProperty(property) ) {
tempInput=document.createElement('input');
tempInput.type="hidden";
tempInput.name=property;
tempInput.value=params[property];
formElement.appendChild(tempInput);
}
}
formElement.submit();
}else{
callback.call(scope||this, null, arg, false);
}
},
// private
loadResponse : function(o){
// Remove the load listener from the iframe
Ext.EventManager.removeListener(o.frame, 'load', o.cb);
var result;
try {
var doc = o.frame.contentWindow.document;
// No document, could be wront Content-Type, or invalid XML
if(!doc){
setTimeout(function(){document.body.removeChild(o.frame);}, 100);
this.fireEvent("loadexception", this, o, {});
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
}catch(e){
this.fireEvent("loadexception", this, o, {}, e);
o.request.callback.call(o.request.scope, null, o.request.arg, false);
return;
}
this.fireEvent("load", this, o, o.request.arg);
o.request.callback.call(o.request.scope, result, o.request.arg, true);
setTimeout(function(){document.body.removeChild(o.frame);}, 1000);
setTimeout(function(){document.body.removeChild(o.form);}, 1000);
}
});

This is my dummy store:


function savedata(data){
//could be extended with a logic how to handle submitted data...
if(data==true){
alert("Successfully saved!");
}else{
alert("Error occured: "+ data);
}
}
var dummystore = new Ext.data.Store({
proxy: new Ext.data.IframeProxy({
url: kmControllerUrl,
method: 'POST',
callback: savedata
}),
reader: new Ext.data.JsonReader({ // The metadata property, with configuration options:
totalProperty: "results", // the property which contains the total dataset size (optional)
root: "rows", // the property which contains an Array of record data objects
idProperty: "id" // the property within each row object that provides an ID for the record (optional)
}),
fields: ['id', 'first'],
baseParams: {
yourNeededData: 'data',
callbackParam: 'savedata',
mode: 'save'
}
});

now i fill all baseParams I need and submit the Store.
the java part looks like this:


String communityPage = request.getParameter("yourNeededData");
String callback = request.getParameter("callbackParam");
boolean saved = false;
//.. do your logic ...
HttpServletResponse response = request.getServletResponse(true);
Writer writer = response.getWriter();
try {
writer.write("<script>\n"+
"var x=location.hostname.indexOf('.')+1;\n"+
"if (x>0) document.domain=location.hostname.substring(x);"+
"parent."+callback+"("+ saved + ");\n" +
"</script>");
}catch(Exception ex){
logger.severe(ex,"error text");
}

Regards
Axel