1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    60
    Answers
    1
    Vote Rating
    3
    rrandymeyer is on a distinguished road

      0  

    Default Answered: form.submit timing out, can it be submitted asynchronously?

    Answered: form.submit timing out, can it be submitted asynchronously?


    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:
    Code:
        
        /**
         * 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.

  2. 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.

  3. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    121
    Answers
    14
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    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.

  4. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    60
    Answers
    1
    Vote Rating
    3
    rrandymeyer is on a distinguished road

      0  

    Default


    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

Thread Participants: 1