How to submit a form using JsonP in Sencha Touch 2?

Question

I'm writing an application using Sencha Touch 2, it works just fine when accessed from web. The problem came when I built it for iPhone and changed the url from a local url (../services/myservice.php) to a remote url (http://remoteurl.com/services/myservice.php)

I started getting a crossdomain error:

**XMLHttpRequest cannot load http://example.com/services/userRegister.php?_dc=1336972603884. Origin http://localhost is not allowed by Access-Control-Allow-Origin.**

And I'd like to ask you if there is a way to submit a form using jsonp, so I don't have this problem anymore.

Here is my code for the form:

Ext.define('RegistroMovil.view.Register',{
extend: 'Ext.form.Panel',
xtype: 'register',
requires:[
    'Ext.form.FieldSet',
    'Ext.form.Email'
],
config: {
    title: 'Register',
    iconCls: 'user',
    url: 'http://example.com/proys/congreso/services/userRegister.php',
    items: [
    ...

And the code of the button that submits the form:

{
            xtype: 'button',
            text: 'Register',
            handler: function(){
                this.up('register').submit({
                    success: function(f, a){
                        alert('Your id: ' + a.id);
                        f.reset();
                    }
                });
            }
        },

Thank you very much!

Saurabh Gokhale Saurabh Gokhale · Accepted Answer · 2012-05-14T05:09:17

You are getting the above error because of cross-origin resource sharing policy.

On the tap event handler of submit button, you could use an Ext.Ajax.request(); but I feel that would also land up you getting the same error.

E.g

Ext.Ajax.request({
  values : paramValues // values from form fields..
  url: '.../test.php',

  success: function(response) {
    console.log(response.responseText);
  }

  failure: function(response) {
    console.log(response.responseText);
  }
});

So, it's better to write an Ext.util.JSONP.request() to handle a form submit.

Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain of the running page, you must use this class, because of the same origin policy.

E.g

Ext.util.JSONP.request({
      params: paramValues // values from form fields..
      url: '.../test.php',
      callbackKey: 'callback',
      scope: 'this',
      success: function(response) {
        console.log(response.responseText);
      }

      failure: function(response) {
        console.log(response.responseText);
      }
});

How to submit a form using JsonP in Sencha Touch 2?

1 Answers