PDA

View Full Version : Cross domain AJAX form submission - help



phishee
7 Jun 2011, 1:26 PM
I've been frustrated by getting my form (which resides in a mobile application) to submit correctly to a remote domain. I am simply trying to save a "recipe" to a Database. I was able to query the server and bring down my recipes list by using JSON. How would I save information to the MySQL DB now? Would I possibly use this (https://github.com/supermethod/Sencha-Touch-JSONP-FormPanel-extension) If so, how can it be implemented?-- Here is the relevant code from my form:


var form;

Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'ingredients', type: 'string'},
{name: 'ingredients1', type: 'string'},
{name: 'ingredients2', type: 'string'},
{name: 'ingredients3', type: 'string'},
{name: 'ingredients4', type: 'string'},
{name: 'ingredients5', type: 'string'},
{name: 'ingredients6', type: 'string'},
{name: 'ingredients7', type: 'string'},
{name: 'ingredients8', type: 'string'},
{name: 'comments', type: 'string'},
{name: 'email', type: 'string'}
],
validations: [
{type: 'presence', name: 'name',message:"Enter Recipe Name"},
{type: 'presence', name: 'ingredients',message:"Enter one ingredient"},
{type: 'format', name: 'email', matcher: /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:"Wrong Email Format"}
]
});

var formBase = {
scroll: 'vertical',
url : 'http://myvisalusdiet.com/app/server.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
title: 'Add Recipe',
ref: 'fs',
id: 'foo',
//instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},


items: [

{
xtype: 'textfield',
name : 'name',
label: 'Recipe Name',
useClearIcon: true,
autoCapitalize : false
},

{
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: '[email protected]',
useClearIcon: true
},
{
xtype: 'textareafield',
name : 'comments',
label: 'Comments',
maxLength: 50,
maxRows: 5,
height: 120
},
{
xtype: 'textfield',
name : 'ingredients',
label: 'Ingredients',
useClearIcon: true,
autoCapitalize : false
},

]

}
],

dockedItems: [


{
xtype: 'toolbar',
dock: 'bottom',

items: [
{
text: 'Add Ingredient',
ui: 'round',

handler: function() {


form.add({
xtype: 'textfield',
label: 'Ingredients',
labelAlign: 'left',
labelWidth: '40%',
useClearIcon: true,
autoCapitalize : false,
id: 'ing',
name: 'ingredients' + form.items.length

}
);

form.doLayout();

},

scope: form
},

{xtype: 'spacer'},
{
text: 'Close',
handler: function() {


form.hide();



}
},


{
text: 'Save',
ui: 'confirm',
handler: function() {
var model = Ext.ModelMgr.create(form.getValues(),'User');

var errors = model.validate(),message = "";
if(errors.isValid()){

if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'},
success: function(e) {
showCenteredOverlay();

}
});

} else {
Ext.each(errors.items,function(rec,i){
message += rec.message+"<br>";
});
Ext.Msg.alert("Validate", message, function(){});
return false;
}


}

}
]
}
]

});


var overlayTb = new Ext.Toolbar({
dock: 'top'
});

var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: Ext.is.Phone ? 260 : 400,
height: 60,
dockedItems: overlayTb
});

var showCenteredOverlay = function() {
overlayTb.setTitle('Recipe Saved!');
overlay.show();
form.hide();
overlay.hide({type:"fade",out:true,duration:1800,scope:this});
};

if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 500,
width: 480,
closeAction: 'close'
});
}

form = new Ext.form.FormPanel(formBase);
formBase.show();

steve1964
7 Jun 2011, 2:09 PM
Hi, you can use a php proxy, in few word you make cross domain call server side, here you can find a simple php proxy:
http://www.daniweb.com/web-development/php/code/216729

http://www.sencha.com/forum/showthread.php?124150-Hack-for-POSTing-data-cross-domain-(JSONP-like)

phishee
7 Jun 2011, 2:14 PM
Steve,

Thanks for the links. I am examining them now and will let everyone know how it turns out.

Thanks again - Brandon (phishee)