ajax problem with sencha touch

Question

I am trying to submit a form using ajax in the sencha touch framework. It's a simple form that asks for a user's name, email address, and a brief message. I then want to post the data to a php script that simply emails the data to me.

The problem I have is when I try to submit the form I get the following error: "SyntaxError: Unable to parse JSON string"

The code to send the request is as follows:

var userName = name.getValue();
var userEmail = email.getValue();
var userMessage = message.getValue();
Ext.Ajax.request({
    url:'path/to/phpfile.php',
    jsonData:{"name":userName, "email":userEmail, "message":userMessage},
    method:"POST",
    success:function(){
        alert("Success!");
    },
    failure:function(){
        alert("Error");
    }
});

The error occurs in the sencha touch framework on line 14583, which is

Ext.util.JSON = {
    encode: function(o){
        return JSON.stringify(0);
    },
    decode: function(s){ 
        return JSON.parse(s); //this is line 14583
    }
};

I'm just starting to learn Ext and sencha touch so could someone please point in the right direction here? Any threads/tutorials/examples would be greatly appreciated.

Thanks in advance

Answer 1

Maybe your Server uses Content Negotioation. In this case it respects the Request-Header-Parameter Accept, which is Accept: */* in your case. So the Server sends your Script HTML or XML which can't be read as JSON.

Change your Code to the following:

Ext.Ajax.setDefaultHeaders({
    'Accept': 'application/json'
});
Ext.Ajax.request({
    url:'path/to/phpfile.php',
    params:{"name":userName, "email":userEmail, "message":userMessage},
    method:"POST",
    success:function(){
        alert("Success!");
    },
    failure:function(){
        alert("Error");
    }
});

Source: http://www.sencha.com/learn/legacy/Manual:RESTful_Web_Services

Answer 2

What happens if you change the Ajax Request to the following.

Ext.Ajax.request({
        url: 'php/file.php',
        method: 'post',
        params: { id: idvar, data1: Ext.encode(schouw), data2: Ext.encode(opmerkingen) },
        success: function(response) {
             //Reponse
   }
});

In my own application this, direct, encoding of the data to JSON works great.

Are you sure the var's you are sending are filled with data? Within my application I use the below code to substract data from the input values (slightly different);

formID.getValues().inputFieldID