PDA

View Full Version : form.submit timing out, can it be submitted asynchronously?



rrandymeyer
20 Nov 2012, 11:33 AM
Hello,

I have a form where the user fills in a few fields and selects an xls file. The form is submitted and the xls file is parsed and rows are added to a database. My client is running into an issue where the app times out after an hour (very large xls file with lots of processing). I have a progress bar that is communicating with the server to show progress which ends up not closing when this occurs. I will post the code from the form below. What is the correct approach to have the form submit in an asynchronous way so the initial POST does not timeout?

Here is the controller code for the submit and progress bar:


/**
* importButtonClicked
*/
importButtonClicked: function(button) {
// get form
var forms = Ext.ComponentQuery.query('DF11Options');
var theForm = forms[0].getForm();
if (theForm.isValid()) {
var myScope = this;
var processType = theForm.findField('df11Process');
var msg = "Perform the import?";

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

/**
* processImport
*/
processImport: function(btn)
{
if(btn == 'yes')
{
// get form
var panels = Ext.ComponentQuery.query('DF11Options');
var theForm = panels[0].getForm();
spreadsheetValue = theForm.findField('file').rawValue;

// save scope
var myScope = this;

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

// submit form
theForm.submit({
url: 'df11import.action',
method: 'POST',

success: function(form, action) {
// hide the progress bar, enable the panel
pBar.reset();
pWin.hide();

// make a call to server to stop the import progress
myScope.stopImportProgress();

// populate and show log
myScope.showImportLog(action.result.logdata);
},

failure: function(form, action) {
// hide the progress bar, enable the panel
pBar.reset();
pWin.hide();

// make a call to server to stop the import progress
myScope.stopImportProgress();

// handle failure
if("INVALIDSESSION" == action.result.message) {
Ext.Msg.alert('Session Expired', 'Your session has expired. Please login again.');

var panel = Ext.ComponentQuery.query('DF11Options');
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('Validation Error', action.result.message);
}
else if("IMPORTERROR" == action.result.errortype) {
Ext.Msg.alert('Import Error', o.result.message);
}
else {
Ext.Msg.alert('Error', action.result.message);
}
}
});

this.startImportProgress();
timerVar = setTimeout(function() {
myScope.getImportProgress(pBar);
}, 1000);

}
},

/**
* startImportProgress
*/
startImportProgress: function() {
var myScope = this;
Ext.Ajax.request({
url: 'start_import_progress.action',
method: 'GET',
success: function(result, request) {
},
failure: function(result, request) {
Ext.MessageBox.alert('startImportProgress Failed', result.responseText);
}
});
},

/**
* getImportProgress
*/
getImportProgress: function(pbar) {
if(!pbar.isHidden()) {
var myScope = this;
Ext.Ajax.request({
url: 'get_import_progress.action',
method: 'GET',
success: function(result, request) {
var json = Ext.decode(result.responseText);
pbar.updateProgress(json.step / json.steps, json.status);
if (json.step < json.steps) {
timerVar = setTimeout(function() {
myScope.getImportProgress(pbar);
}, 1000);
}
},
failure: function(result, request) {
clearTimeout(timerVar);
}
});
}
else
{
// clear timer
clearTimeout(timerVar);
}
},

/**
* stopImportProgress
*/
stopImportProgress: function() {
var myScope = this;
Ext.Ajax.request({
url: 'stop_import_progress.action',
method: 'GET',
success: function(result, request) {
},
failure: function(result, request) {
Ext.MessageBox.alert('stopImportProgress Failed', result.responseText);
}
});
},



Thank you.

chamacs
20 Nov 2012, 12:28 PM
I don't think the issue is with the ext side of the app. All the AJAX requests in your code are async. To speed this up, the server-side process handling the xls file would need to process the request asynchronously and not hold up a response to the UI. Basically:
- Upload file -> respond with 'successfully uploaded'
- Server-side async thread processes file
- UI could ping the server for status of processing

Just a thought. Thanks.

rrandymeyer
28 Nov 2012, 6:04 AM
Hi chamacs,

Thanks for the reply. I made updates to process the server side code asynchronously and included a completed flag as part of the progress bar ping. This worked out OK.

Rudy