PDA

View Full Version : How to load data in formfield via Ajax



marc123
29 Jul 2012, 6:52 AM
Hi,
I have a loginForm, containing name/pw fields. As part of a Challenge-Handshake Authentication Protocol I also have a hidden field, the value of which contains random string (the challenge). That challenge is obtained from a webservice.
I have the loginform with hidden field and all.
My Q is: how can I populate the hiddenField with the value obtained from the webservice?

Can this be done without declaring a store and model? Seems overkill for just 1 field.
I hoped this was a configuration option but I can't figure out which.

My form:

var loginForm=Ext.create('Ext.form.Panel',{
standardSubmit: true,
//url:baseUrl+'remoteSecurityService.cfc?method=authenticate',
frame:true,
height:120,
defaults:{
width:300,
labelAlign:'right',
xtype:'textfield'
},
items:[{
xtype:'hiddenfield',
name:'token',
id:'tokenField'
},{
fieldLabel:'username',
name:'email'
},{
fieldLabel:'password',
name:'password',
inputType:'password'
}],
buttons:[{
text:'login',
handler:function(){
var theForm=this.up('form').getForm();
if(theForm.isValid()){
var formValues=theForm.getValues();
Ext.data.JsonP.request({
url:theForm.url,
method:'POST',
params:{
username:formValues.email,
tokenAndPasswordHash:formValues.password
},
callback:function(data){
alert(data.responseText);
}
});
}
}
}],
listeners:{
afterrender:function(theForm,action,opts){
var tokenField=theForm.getComponent('tokenField');
tokenField.update('http://cms.local/ws/remoteSecurityService.cfc?method=initchallenge')}
}
});


Thanks,

Marc

vietits
29 Jul 2012, 4:25 PM
You can use Ajax.request() to do the job. Something likes this:


listeners:{
afterrender:function(theForm,action,opts){
// var tokenField=theForm.getComponent('tokenField');
// tokenField.update('http://cms.local/ws/remoteSecurityService.cfc?method=initchallenge')
Ajax.request({
url: 'http://cms.local/ws/remoteSecurityService.cfc?method=initchallenge',
success: function(response, opts) {
var tokenField = theForm.getComponent('tokenField');
tokenField.setValue(response.responseText);
},
failure: function(response, opts) {
// error handling
}
});
}
}

marc123
29 Jul 2012, 11:36 PM
I already figured this out:


listeners:{
afterrender:function(theForm,action,opts){
Ext.data.JsonP.request({
url:'http://cms.local/ws/remoteSecurityService.cfc?method=initchallenge',
method:'GET',
success:function(response){
var tokenField=loginForm.getComponent('tokenField').setValue(response.data);
}
});
}
}

Have to use jsonp since the domain I request data from is different from the domain I'm from...

Thanks for the help anyway,

Marc