PDA

View Full Version : Sencha Touch Cant decode JSON response from form submit()



ggunders
4 Mar 2011, 12:26 PM
Tried hundreds of combinations that work in extjs, but dont work on sencha touch

just want to decode a json response from my php server



dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Login',
ui: 'confirm',
//scope: this,
handler: function() {
loginform.submit({
method: 'POST',
url: BASE_URL + 'test.php',
waitMsg: 'waiting..',
success: function(result, request) {
var json = Ext.util.JSON.decode(result.responseText);
//Ext.util.JSON.decode('{"success": true, data: {"result": ""}}');
//Ext.util.JSON.decode('{"info": {"synopsis": "test"}}');
//var json = action.result;
console.log(json.message);
//console.log(json.data.result);
//Ext.Msg.alert("Success", json.data.result);},
//Ext.Msg.alert("success"); window.location = 'layout.html';},
},

failure: function(form, action) {
var json = action.result;
Ext.Msg.alert("Login Failed!");}
});//submit
}
}]
}
]
};




PHP returns




echo " {\"success\": true,\"message\": \"hello\"}";



Chrome returns Uncaught SyntaxError: Unexpected token ILLEGAL sencha-tough-debug 14531

ngardner
4 Mar 2011, 12:33 PM
I was having the same issue. I got mine to work by having PHP respond a json array instead of a json object. Try changing your PHP to...


echo "[ {\"success\": true,\"message\": \"hello\"} ]";

ggunders
4 Mar 2011, 12:44 PM
Thanks for the quick response,

the json array did not work either - same error message.

its so odd, this works when using the extjs libraries

ggunders
4 Mar 2011, 12:48 PM
Disregard last response,

when changing to an array


echo "[ {\"success\": true,\"message\": \"hello\"}]";


The success block is skipped and the failure block is called.
The array is messing with the success: true

ggunders
4 Mar 2011, 1:28 PM
Found a solution:

dont use the submit() function!!

the following are two methods of POST'ing data to a server.

the first uses submit and fails, the second uses ajax and passes



var ajaxHandler = function(){
Ext.Ajax.request({
url : BASE_URL + 'test.php' ,
params : { login : loginform.getValues().login, password: loginform.getValues().password },
method: 'POST',
success: function ( result, request ) {
var jsonData = Ext.util.JSON.decode(result.responseText);
Ext.Msg.alert('Success', 'Data return from the server: '+ jsonData.msg);
},
failure: function ( result, request) {
Ext.Msg.alert('Failed', result.responseText);
}


});
}


function submitHandler() {

loginform.submit({
method: 'POST',
url: BASE_URL+'test.php',
waitMsg: 'Waiting...',
success: function(result, request) {
var jsonData = Ext.util.JSON.decode(result.responseText);
Ext.Msg.alert("Success", jsonData.msg);
},//success

failure: function() {

Ext.Msg.alert("Failure");



}//failure
});
}



Note: both methods work using extjs, not sencha touch!!!

mitchellsimoens
5 Mar 2011, 5:58 AM
Have you even looked at the actual JSON the gets returned and checked it's validity?

Also, why not make use of json_encode in your PHP instead of echoing a string like that?


$return = array("success" => true, "message" => "Hello");
echo json_encode($return);

ggunders
5 Mar 2011, 5:18 PM
I did check the response in the chrome inspector network window. the json looked acceptable. again, this json works in extjs - sencha touch has an issue.

i tried this as well
$return = array("success" => true, "message" => "Hello");
echo json_encode($return);

tierrarara
26 Jul 2011, 5:23 PM
I found 2 solution with the same problem

1) use Ext.util.JSONP.request ();

but de response is text/javascript



Ext.util.JSONP.request({
url: '/test.json',
callbackKey: 'callback'
});
function callback ( opts) {


var tpl = new Ext.XTemplate(
'<tpl for="rows">', // rows -> json response
'<p>{name}</p>',
'<p>{phone}</p>',
'</tpl></p>'
);
tpl.overwrite(mypanel.body, opts);

}

response header -> text/javascript


callback({rows: [{name: 'tierrarara', phone: '5555555'}]});



2)


Ext.Ajax.request({
url: '/test.json',
method: 'GET',
defaultHeaders: 'application/json',
callback: function (o,s,r) {


var tpl = new Ext.XTemplate(
'<tpl for="rows">', // rows -> json response
'<p>{name}</p>',
'<p>{phone}</p>',
'</tpl></p>'
);
tpl.overwrite(mypanel.body, Ext.decode(r.responseText));

}
});

response header -> application/json



{"rows": [{"name": 'tierrarara', "phone": '5555555'}]}


i hope help you,
note quotes in the response json string in the Ext.Ajax.request