Form - how to catch server-side error and success message

[ffzhuang]

Hello,

I am using form function and submit the form information to the server-side. Server-side code get all the information. For example, create new Account action, if anything wrong, an error JSON message is created and through back to form. Form display the error message. If it is ok, nothing happen. My code look like this:



aAddAccBtn.on('click', function() {
if (!aAddAccDlg) {
aAddAccDlg = new Ext.LayoutDialog("a-addAcc-dlg", {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width: 480,
height: 302,
shadow:true,
center: {
autoScroll: true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
aAddAccDlg.addKeyListener(27, aAddAccDlg.hide, aAddAccDlg);
aAddAccDlg.addButton('Reset', resetForm, aAddAccDlg);
aAddAccDlg.addButton('Save', function() {
// validation now
if (password_tf.getValue()!=cPassword_tf.getValue()) {
password_tf.markInvalid("passwords not match");
password_tf.focus();
return;
}

// submit now... all the form information are submit to the server
if (form_acc.isValid()) {
form_acc.submit({
waitMsg:'Creating new account now...'
});

// need catch server-side information, if error, keep currently dialog and display error message

// if success, make currently dialog disappear
aAddAccDlg.hide();

}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
});
aAddAccDlg.addButton('Cancel', function() {aAddAccDlg.hide();});

var layout = aAddAccDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-addAcc-inner', {title: 'create account'}));
layout.endUpdate();
}

aAddAccDlg.show(aAddAccBtn.dom);
});

var lastname_tf = new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'lastname'
});

// create a new form now...
var form_acc = new Ext.form.Form({
labelAlign: 'right',
url:'/yuiExt/listAccount.do?action=createAccount'
});

form_acc.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
form_acc.fieldset(
{id:'desc', legend:'Please fill the field'},
username_tf,
password_tf,
cPassword_tf,
firstname_tf,
lastname_tf
);

form_acc.applyIfToFields({width:255});
form_acc.render('a-addAcc-form');
form_acc.end();
My problem is that how can I catch server-side error or success information. I do believe there exist a simple way to figure this out. The main reason I want to know success or fail is that:

If it is failed, I want to keep currently dialog. Do not run: aAddAccDlg.hide();

If it is success, I want to make current dialog disappear and run: aAddAccDlg.hide();

How can I easy know server-side validation status (flag to show success or fail). Does there exist any parameter (quick way) to know validation failed? For example, such error is created on server-side:

{errors:[(id:username, msg: username already used)]}.

Any suggestion would be great appreciate.

Thanks in advanced for your kind assistance

Regards!

Fenqiang Zhuang

[tryanDLS]

Add listeners for the actioncomplete/actionfailed events.


listeners: {
'actioncomplete': {fn:this.doSuccess, scope:this},
'actionfailed': {fn:this.doFailure, scope:this}
}

See the xml form example or the Examples forum for other samples.

[comm]

You may take a look at this thread (http://extjs.com/forum/showthread.php?t=7637).

[ffzhuang]

Thanks tryanDLS and comm for quick answer. It is work now.

My code look like this:



form_acc.submit({
waitMsg:'Creating new account now...',
reset: false,
success: function(form_acc, action) {
Ext.MessageBox.alert('Confirm', action.result.data);
aAddAccDlg.hide();
}
});

[vicent]

Thanks tryanDLS and comm for quick answer. It is work now.

My code look like this:



form_acc.submit({
waitMsg:'Creating new account now...',
reset: false,
success: function(form_acc, action) {
Ext.MessageBox.alert('Confirm', action.result.data);
aAddAccDlg.hide();
}
});


how can I get the retrun message ?
the json format like
{success:true,data:{responseMsg:'the return message'}}
how can I get the responseMsg?

[tryanDLS]

Look at the action object in Firebug to see all the properties.

[comm]

how can I get the retrun message ?
the json format like
{success:true,data:{responseMsg:'the return message'}}
how can I get the responseMsg?

If you define an event handler for success (form.submit()), which is the callback function have 2 parameters the form itself and an action object. You may access the value by accessing actionobjectname.result.data.responseMsg.
For illustration, read the following code:


function(f,a)
{
if (a && a.result && a.result.data)
{
var msg = a.result.data.responseMsg;
alert("msg = " + msg);
}
}

[gkassyou]

comm, I tried your example but the result is undefined. Ive looked at it in FF and it's undefined.

I've used the same json return value in the above example.

[comm]

comm, I tried your example but the result is undefined. Ive looked at it in FF and it's undefined.

I've used the same json return value in the above example.

First thing, you have to correct your JSON data (data must be an array) and become:


{success:true,data:[{responseMsg:'the return message'}]}

NOTE the [] indicates array notation.
And the the handler code become (sorry for previous error):


function(f,a)
{
if (a && a.result && a.result.data)
{
var msg = a.result.data[0].responseMsg; // data is an array
alert("msg = " + msg);
}
}

I have tried this code, and works perfectly.

Hope this help.

[gkassyou]

I'm still getting the a.result being undefined. Here's my code.


gridForm.submit(
{
//waitMsg: 'Saving changes, please wait...',
url:'jsonController.taf?function=processOrderJSON'+encodeURIComponent(jsonData),
//params:{data:jsonData},
success:function(f,a) {
window.open('<@appfilepath>OrderForm.taf?function=PrintOrder&OrderID='+ a.result.data[0].responseMsg +'&type=Order');
},
failure: function(f, a) {
Ext.Msg.alert('Error','There was an error processing the Order. Error:'+a.result.message);
}
}
);

I'm also using the same JSON message in your example

[tryanDLS]

What is 'a'? Look at the object in firebug to see what it contains. Set BPs in the response handling methods of the action object to see how your JSON string is being processed.

[comm]

Weird.
It should work perfectly if you have corrected your JSON data as I described earlier.
You may check the existance of result and data with
if (a && a.result && a.result.data) {}.
You should paste your "new" JSON data here.

[gkassyou]

I think perhaps it's not returning the JSON message but a success somewhere in my server code. I'll need to do more debugging and post some more later.


Set BPs in the response handling methods of the action object to see how your JSON string is being processed.

where can I set those BP's to see my JSON string?

[tryanDLS]

where can I set those BP's to see my JSON string?
Action is an object used in the Form load/submission process - it has subclasses for Load and Submit.

[gkassyou]

The action.result is now working. My app wasn't returning the success JSON string.

Thanks for your help.