PDA

View Full Version : Not hitting success/failure calls on form.submit in IE8



rrandymeyer
26 Jun 2012, 7:46 AM
Hello,

I have a issue with IE8 (this works as expected in IE9, FF and Chrome) where the success:function() and failure:function() in a form.submit() are not being called.

Here is my code for reference:


processImport: function(btn){
if(btn == 'yes')
{
// get form
var addForm = Ext.ComponentQuery.query('ImportForm');
var form = addForm[0].getForm();
if (form.isValid()) {
// save scope
var myScope = this;

// create progress bar
var pBar = Ext.create('Ext.ProgressBar', {});
var pWin = Ext.create('Ext.window.Window', {
closable: false,
frame: false,
frameHeader: false,
title: "Importing Records...",
width: 400,
layout: 'fit',
items: [pBar]
}).show();
pBar.wait({interval: 1000});

// submit form
console.log('calling form.submit()');
form.submit({
url: 'import.action',
method:'POST',

success: function(form, action) {
console.log('success: function...');
pBar.reset();
pWin.hide();
clearFileUpload("spreadsheet");
myScope.getImportLogStoreStore().loadData(action.result.logdata)
var win = new Ext.create('CEI.view.ImportLog', {});
win.show();
},

failure: function(form, action) {
console.log('failure: function...');
pBar.reset();
pWin.hide();
clearFileUpload("spreadsheet");
if("INVALIDSESSION" == action.result.message) {
Ext.Msg.alert('Session Expired', 'Your session has expired. Please login again.');

var panel = Ext.ComponentQuery.query('ImportForm');
var ImportForm = panel[0];
if(ImportForm) {
ImportForm.hide();
}

panel = Ext.ComponentQuery.query('LoginForm');
var loginForm = panel[0];
if(loginForm) {
loginForm.show();
}
}
else if("VALIDATIONERROR" == action.result.errortype) {
Ext.Msg.alert('Import Validation Error', action.result.message);
}
else if("ImportLog" == action.result.errortype) {
Ext.Msg.alert('Import Error', o.result.message);
}
else {
Ext.Msg.alert('Error', action.result.message);
}
}
});
}
}
},

The progress bar is never closed. There is no issue with IE9, FF or Chrome. I would really appreciate any insight since my client of course does not have an option as to the browser choice.

I am running Ext 4.02a
Thank you

friend
26 Jun 2012, 9:04 AM
You're missing a semi-colon after this line in your 'success' function:



myScope.getImportLogStoreStore().loadData(action.result.logdata)


This might be related to the problem.

rrandymeyer
26 Jun 2012, 9:39 AM
Thank you for the response friend. I added the semi-colon, same behavior. I also upgraded to version 4.1 prior to adding the semi-colon and that did not help either.

scottmartin
26 Jun 2012, 12:12 PM
Are you getting a response from the server ... or just not seen?
If you comment out the progressbar code, any help?

Scott.

rrandymeyer
26 Jun 2012, 12:43 PM
Hi Scott,

I commented out the progress bar - no difference. I am getting a response from the server.



{success:true, logdata:[{"message":"Account Master (10130898-36400000000000000000) PCC Status not equal 'B'.","project":"FCCLA03","title":"8762-364-CM-ETRK-ERWK-0010-23-L","row":2,"afeNumber":"10130898","objectCode":"8762","subsidiary":"364","responsibility":"CM","area":"ETRK","workPackage":"ERWK","discipline":"0010","subActivity":"23","lemsCode":"L","indirectCost":"N","pccStatus":"C","budgetAmount":"100000.0","approved":"N","pccDescription":"Descriptive text for the PCC code","projectCostCode":"10130898-364CMETRKERWK001023L","validationError":true,"importAction":"No Change"}]}


I can watch the debugger in IE and see it return. I have also noticed as soon as the form is submitted it becomes active.

scottmartin
26 Jun 2012, 12:59 PM
In an effort narrow this down, the following does not work:



processImport: function(btn) {
if (btn == 'yes') {
// get form
var addForm = Ext.ComponentQuery.query('ImportForm');
var form = addForm[0].getForm();
if (form.isValid()) {
// submit form
console.log('calling form.submit()');
form.submit({
url: 'import.action',
method: 'POST',

success: function(form, action) {
console.log('success: function...');
},

failure: function(form, action) {
console.log('failure: function...');
}
});
}
}
}


Please post your model/proxy/store config and see if adding an exception handler produces any results:



proxy: {
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}


Regards,
Scott.

rrandymeyer
26 Jun 2012, 1:26 PM
Hi Scott,

I am using the MVC approach with Spring MVC on the server side.

form:


Ext.define('CEI.view.ImportForm', {
extend: 'Ext.form.Panel',
alias: 'widget.ImportForm',
title: "Import",

url: 'apply.action',
frame: true,

fieldDefaults: {
labelWidth: 80
},
bodyPadding: 10,
width: 525,

defaultType: 'textfield',
// defaults: {
// anchor: '100%'
// },

items: [
{
xtype: 'GroupCombo'
}, {
xtype: 'radiogroup',
fieldLabel: 'Process Type',
id: 'process',
columns: 1,
items: [
{boxLabel:'PCC Maintenance', name:'processType', inputValue:'PCCM', checked:'true'},
{boxLabel:'Budget Maintenance', name:'processType', inputValue:'BM'}
]
}, {
xtype: 'filefield',
id: 'spreadsheet',
name: 'spreadsheet',
fieldLabel: 'Import File',
emptyText: 'Select an import file...',
width: 500,
allowBlank: false
}
],

buttons: [{
text: 'Import Data',
id: 'importButton',
action: 'import'
},{
text: 'Close',
id: 'closeButton',
action: 'close'
}],

initComponent: function() {
this.callParent(arguments);
}

});

function clearFileUpload(id){
// get the file upload element
fileField = document.getElementById(id);
// get the file upload parent element
parentNod = fileField.parentNode;
// create new element
tmpForm = document.createElement("form");
parentNod.replaceChild(tmpForm,fileField);
tmpForm.appendChild(fileField);
tmpForm.reset();
parentNod.replaceChild(fileField,tmpForm);
};


Controller:


Ext.define('CEI.controller.ImportController', {
extend: 'Ext.app.Controller',

models: [
'GroupComboModel',
'ImportLogModel'
],

stores: [
'GroupComboStore',
'ImportLogStore'
],

views: [
'ImportForm',
'GroupCombo',
'ImportLog'
],

init: function() {
this.control({
'ImportForm':
{
show: this.ImportFormAfterShow
},
'ImportForm button[action=close]':
{
click: this.closeButtonClicked
},
'ImportForm button[action=import]':
{
click: this.importButtonClicked
},
'ImportLog #ImportLogCloseButton':
{
click: this.ImportLogCloseButtonClicked
},
'ImportLog #ImportLogPrintButton':
{
click: this.ImportLogPrintButtonClicked
},
'ImportLog':
{
show: this.ImportLogAfterShow
}
});
},

/**
* ImportFormAfterShow
*/
ImportFormAfterShow: function() {
// console.log('ImportFormAfterShow');

var forms = Ext.ComponentQuery.query('ImportForm');
var theForm = forms[0].getForm();
theForm.reset();

this.getGroupComboStoreStore().removeAll(false);
if(this.getGroupComboStoreStore().getCount() <= 0) {
var myScope = this;
this.getGroupComboStoreStore().load({
params: {},
callback: function(records,object,status)
{
if(status)
{
myScope.setGroupValue(records[0].data.groupName);
}
else
{
Ext.Msg.alert('Loading Groups Failed', 'Please see log for details.');
}
}
});
}
clearFileUpload("spreadsheet");
},

/**
* setGroupValue
*/
setGroupValue: function(value) {
// console.log('setGroupValue::'+value);
var groupCombo = Ext.ComponentQuery.query('GroupCombo');
groupCombo[0].setValue(value);
},

/**
* closeButtonClicked
*/
closeButtonClicked: function(button) {
// console.log('closeButtonClicked');

var panel = Ext.ComponentQuery.query('ImportForm');
var ImportForm = panel[0];
if(ImportForm) {
ImportForm.hide();
}

panel = Ext.ComponentQuery.query('LoginForm');
var loginForm = panel[0];
if(loginForm) {
loginForm.show();
}
},

/**
* importButtonClicked
*/
importButtonClicked: function(button) {
// get form
var forms = Ext.ComponentQuery.query('ImportForm');
var theForm = forms[0].getForm();
if (theForm.isValid()) {
var myScope = this;
var processType = theForm.findField('processType');
var msg;
if("PCCM" == processType.getGroupValue())
{
msg = "Perform the PCC Maintenance import?";
}
else
{
msg = "Perform the Budget Maintenance import?";
}

Ext.MessageBox.confirm('Import',
msg,
myScope.processImport, myScope);
}
},

/**
* processImport
*/
processImport: function(btn)
{
if(btn == 'yes')
{
// get form
var forms = Ext.ComponentQuery.query('ImportForm');
var theForm = forms[0].getForm();

// submit form
console.log('calling form.submit()');
theForm.submit({
url: 'import.action',
method:'POST',

success: function(form, action) {
console.log('success: function...');
},

failure: function(form, action) {
console.log('failure: function...');
}
});
}
},

proxy: {
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}

});



There are no models/stores related to the submit.

Thank you.

rrandymeyer
27 Jun 2012, 6:20 AM
I thought about this more this morning. I have a loginForm/loginController that is working fine with IE8. I put similar outputs in the success/failure callbacks on the login submit and they show up. The main difference between the two forms is the importForm has an xtype: 'filefield' on it. When I remove that field the form submits fine and I see the console out's for success/failure.

I have updated the server side to return nothing but {success:true}. When I have the filefield on the form it does not hit the success method, when I comment it out, it works.

I originally was running this with ExtJS 4.02a, I have updated to 4.1. I hope this information helps to figure out this issue.

Thank you.

rrandymeyer
28 Jun 2012, 5:41 AM
Hi All,
Just wanted to bump this. If anyone has any ideas I would really appreciate it.
Thanks

rrandymeyer
28 Jun 2012, 7:05 AM
I noticed another difference between IE8 and IE9. Looking at the Response headers:

IE8:
Key Value
Content-Type application/x-ms-application

IE9:
Key Value
Content-Type text/html

I know this is probably a Spring thing now so I will post to a different forum but if someone has an idea here that would be great.

I have written a small ext-js/Spring MVC app that reproduces the issue. This can be deployed to Tomcat or WebLogic.
36634

rrandymeyer
29 Jun 2012, 10:23 AM
I updated the Spring MVC Controller to force the Content-Type to be "text/html".

Original Code:

public @ResponseBody String importData(@RequestParam String groupName, @RequestParam String processType,
@RequestParam CommonsMultipartFile spreadsheet) throws Exception



Updated:

public void importData(@RequestParam String groupName,
@RequestParam String processType,
FileUploadBean uploadItem,
BindingResult result,
HttpServletResponse response) throws Exception
{
...

// return data
response.setContentType("text/html");
response.getWriter().write("{success:true}");
response.flushBuffer();
return;
}

stimpy
29 Jun 2012, 11:00 AM
Randy

Can you see your responses in firebug ?

If you are using Spring you should be able set your response headers manually if that is causing the problem

see here https://jira.springsource.org/browse/SPR-6702