PDA

View Full Version : [2.2] Error In IE7 - No MessageBox in success of submit



NoRiverHome
6 Jul 2009, 7:01 AM
The following code is an ext form.



Ext.onReady(function(){

Ext.QuickTips.init();
var year = new Date();
year = year.getFullYear();

Ext.BLANK_IMAGE_URL = '/js/ext-2.2/resources/images/default/s.gif';
var submit_function = function() {
if (payment_form.getForm().isValid() /*&& Ext.getCmp("terms").getValue()*/) {
payment_form.getForm().submit({
params:{
shop_submit:1,
total:total,
items:items,
quantities:quantities,
agent:agent
},
failure: function(form, action) {
Ext.MessageBox.show({
//animEl: 'registration',
title:'?????',
msg: '?? ???? ?? ?????? ??????.',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR,
cls:'message_box',
width: 300
});
//Ext.MessageBox.animEl = 'registration';
//Ext.MessageBox.maxWidth = 300;
//Ext.MessageBox.alert(error_title, error_text);
//Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form, action) {
Ext.MessageBox.show({
//animEl: 'registration',
title:'????!',
msg:'???? ?????? ???? ?????? ???? ??????? ????? ???? ????? ????? ???? ?? 5 ??? ?????',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO,
width: 400,
cls:'message_box',
fn: function(){location="http://url.com/";}
});
}
});
} else{
Ext.MessageBox.show({
//animEl: 'registration',
title:'?????',
msg: '?? ???? ?? ?????? ??????.',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR,
cls:'message_box',
width: 300
});
//Ext.MessageBox.alert(error_title, error_text);
}
};
var payment_items = {
layout:'form',
border: false,
width:500,
bodyStyle:'padding:5px 0',
autoHeight: true,
items: [{
xtype: 'textfield',
fieldLabel: "* ?? ??????",
name: 'cc_name',
allowBlank: false,
width: 200
},{
xtype: 'textfield',
fieldLabel: "* ????? ????",
name: 'phone',
allowBlank: false,
width: 200
},{
xtype: 'textarea',
fieldLabel: "* ?????",
name: 'address',
allowBlank: false,
width: 200
},{
xtype: 'textfield',
fieldLabel: "???? ?????",
name: 'agent_num',
allowBlank: true,
value: document.getElementById('recomm').value,
width: 200
},{
xtype: 'textfield',
vtype: 'email',
fieldLabel: "* ????",
name: 'email',
allowBlank: false,
width: 200
},{
xtype: 'textfield',
fieldLabel: "* ???? ?.?",
name: 'tz_id',
allowBlank: false,
width: 200
},{
layout:'column',
border:false,
width:306,
items:[{
columnWidth:.67,
layout: 'form',
border:false,
items: [
new Ext.form.ComboBox({
valueField: 'card_id',
displayField: 'card_name',
hiddenName: 'card_type',
triggerAction: 'all',
mode: 'local',
width: 200,
hideLabel: true,
allowBlank: false,
store: new Ext.data.SimpleStore({
fields: ['card_id','card_name'],
data: [
[1,'????'],
[2,'???????'],
[3,'???????'],
[4,'?????? ??????']
]
})
}),{
xtype: 'textfield',
hideLabel: true,
name: 'card_num',
allowBlank: false,
width: 200
},{
layout:'column',
border:false,
width:200,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [
new Ext.form.ComboBox({
valueField: 'month_id',
displayField: 'month_name',
hiddenName: 'exp_month',
triggerAction: 'all',
mode: 'local',
//fieldLabel: '* '+exp_month,
hideLabel: true,
allowBlank: false,
width: 90,
store: new Ext.data.SimpleStore({
fields: ['month_id','month_name'],
data: [
[1,'01'],
[2,'02'],
[3,'03'],
[4,'04'],
[5,'05'],
[6,'06'],
[7,'07'],
[8,'08'],
[9,'09'],
[10,'10'],
[11,'11'],
[12,'12']
]
})
})
]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [
new Ext.form.ComboBox({
valueField: 'year_id',
displayField: 'year_name',
hiddenName: 'exp_year',
triggerAction: 'all',
mode: 'local',
width: 90,
allowBlank: false,
hideLabel:true,
allowBlank: false,
store: new Ext.data.SimpleStore({
fields: ['year_id','year_name'],
data: [
[year,year],
[year+1,year+1],
[year+2,year+2],
[year+3,year+3],
[year+4,year+4],
[year+5,year+5]
]
})
})
]}
]},
new Ext.form.ComboBox({
valueField: 'num_payments_id',
displayField: 'num_payments',
hiddenName: 'num_payments',
triggerAction: 'all',
mode: 'local',
hideLabel: true,
allowBlank: false,
width: 90,
store: new Ext.data.SimpleStore({
fields: ['num_payments_id','num_payments'],
data: [
[1,'1'],
[2,'2'],
[3,'3'],
[4,'4'],
[5,'5'],
[6,'6'],
[7,'7'],
[8,'8'],
[9,'9'],
[10,'10']
]
})
})
]},{
columnWidth:.33,
layout: 'form',
border:false,
items: [{
border: false,
html:'* ??? ?????',
bodyStyle: 'margin-top:5px;'
},{
border: false,
html:'* ???? ?????',
bodyStyle: 'margin-top:5px;'
},{
border: false,
html:'* ????',
bodyStyle: 'margin-top:11px;'
},{
border: false,
html:'* ???? ???????',
bodyStyle: 'margin-top:11px;'
}]
}]
}
]};
/*
var terms = {
layout:'column',
border:false,
width:500,
items:[{
columnWidth:.95,
border:false,
//bodyStyle:'margin-top: 14px;',
html: '&nbsp;&nbsp;* ?????, ????? ???? ???? ?? <a href="/sites/forex/_static_media/public/statute.pdf">????? ????</a> <a href="/sites/forex/_static_media/public/agreement.pdf">????? ??????</a> ????????? ????.'
},{
columnWidth:.05,
layout: 'form',
border:false,
items: [{
xtype: 'checkbox',
hideLabel: true,
name: 'terms',
id: 'terms',
height:20,
width: 25
}]
}]
};
*/

var payment_form = new Ext.FormPanel({
width: 475,
//height: 250,
border: false,
layout:'form',
id: 'payment_form',
url: location.href,
items:[payment_items],
renderTo: 'subscribe_form'
});

document.getElementById("submit_form").onclick = submit_function;
});





The MessageBox in the success block of the form doesn't show up on IE7.
The debugging just didn't work, I don't know what causes the problem since the other messageboxes does show up. I already tried to duplicate one of the other messageboxes into the success block, but it didn't work.



help would be appreciated.:)

Condor
6 Jul 2009, 7:16 AM
And debugging using Firefox + Firebug? Or using IE8 Developer Tools (optionally in IE7 mode)?

NoRiverHome
6 Jul 2009, 7:21 AM
I used both FireBug and IE8's Developer Tools.

Both didn't come up with any errors. in fact, it works perfectly fine in these browsers.

NoRiverHome
6 Jul 2009, 10:14 PM
Any other suggestions?

please, I really don't know what to do.

Condor
6 Jul 2009, 11:12 PM
And if you use IE8 and switch to IE7 mode in the developer tools?

Alok.Ranjan
16 Jul 2009, 2:39 AM
I have following piece of code inside form submit

buttons : [
{
text : messages.register,
type : 'submit',
id : 'app_registration_submit_button',
handler : function() {
var currentForm = regInfoPanel.getForm();

currentForm.submit({
url : 'RegisterInApp.php',
params : {
action : 'registerUserWithTheApp'
},
success : function(form, action) {
var responseObj = Ext.util.JSON.decode(action.response.responseText);
if ( responseObj.status === false ) {
Ext.Msg.alert('Failed to register user! Please try later! ');
}else {
window.open('http://apps.facebook.com/talentportal/','_top');
}

var appSubmitButton = Ext.getCmp('app_registration_submit_button');
appSubmitButton.disable();
},
failure : function(form, action) {
Ext.Msg.alert('Failed to register user. Please try later!' );
},
scope : this
});
},
formBind : true
}
, {
text : messages.reset,
type : 'reset',
handler : function() {
var currentForm = regInfoPanel.getForm().reset();
},
formBind : true
}
]

This works alright in Firefox. While IE7 doesn't seem to be doing anything inside the success block. Any help will be appreciated.

Condor
16 Jul 2009, 2:52 AM
type:'submit'? This isn't a submit button; it's a normal button doing an XHR request.

Either change the type to 'button' or stop the event in the handler.

Alok.Ranjan
16 Jul 2009, 4:55 AM
Hi Condor, thanks for your quick response. I changed the type to 'button'. However, the behavior is still same. I also commented out type config and it had no effect.

You asked me to stop the event in the handler. Can you please elaborate that.

Thanks again for your help.

Condor
16 Jul 2009, 5:42 AM
That is only required if you keep it a type:'submit' button.

To prevent the browser from actually submitting the form you would have to add:

handler: function(e){
e.stopEvent();
...
}