Some large forms would benefit from having auto-save functionality. We have built a simple auto-save script that your can add to any Edit page in your PHPRunner/ASPRunnerPro/ASPRunner.NET application.
Here is how it looks right after record was saved:
Limitations:
- uploaded files are not saved automatically
- if page shows one details tables - details won't be saved automatically
The code below can be pasted as is to any Edit page Javascript OnLoad event.
// to log off user automatically after a certain amount of incativity // uncomment one of the following lines // 120 is time in minutes, meaning two hours // PHPRunner // setTimeout("window.location='login.php?a=logout'",120*1000*60); // ASPRunnerPro //setTimeout("window.location='login.asp?a=logout'",120*1000*60); // ASPRunner.NET // setTimeout("window.location='login?a=logout'",120*1000*60); var interval=5*1000; // auto-save every 5 seconds if ( inlineObject ) { return; } $("body").css("margin-top","20px"); $("body").css("padding-left","0px"); var $messageBox, $autoSaveMessage, timeInterval = interval, autoSave = function() { var form, i, ctrl, baseParams, intervalId, fieldControls = [], constants = Runner.controls.constants, controls = Runner.controls.ControlManager.getVisibleAt( pageObj.tName, pageObj.pageId ), fileFormats = [ constants.EDIT_FORMAT_DATABASE_IMAGE, constants.EDIT_FORMAT_DATABASE_FILE, constants.EDIT_FORMAT_FILE ]; baseParams = $.extend( {}, pageObj.baseParams, { fly: 1, onFly: 1, editType: Runner.pages.constants.EDIT_POPUP }); for (i = 0; i < controls.length; i++) { ctrl = controls[i]; if ( $.inArray( ctrl.fieldName, pageObj.keyFields ) === -1 && $.inArray( ctrl.editFormat, fileFormats ) === -1 ) { ctrl = $.extend( {}, ctrl, { validationArr: [] } ); fieldControls.push( ctrl ); } } baseParams["fly"] = 1; baseParams["onFly"] = 1; baseParams["editType"] = Runner.pages.constants.EDIT_POPUP; form = new Runner.form.BasicForm({ method: 'POST', id: pageObj.pageId, isFileUpload: true, baseParams: baseParams, fieldControls: fieldControls, submitUrl: pageObj.submitUrl, beforeSubmit: { fn: function( formObj ) { return this.fireEvent( "beforeSave", formObj, formObj.fieldControls, this ); }, scope: pageObj }, submitFailed: { fn: function( response, formObj, fieldControls ) { showAutoSaveMessage( "Record has not been saved" ); formObj.destructor( false ); }, scope: pageObj }, successSubmit: { fn: function( response, formObj, fieldControls ) { if ( response.success ) { pageObj.hideBrick('message'); showAutoSaveMessage( "Record has been saved" ); } else { pageObj.displayHalfPreparedMessage( response.message || "" ); pageObj.showBrick('message'); $messageBox.hide(); } formObj.destructor( false ); }, scope: pageObj } }); form.submit(); }, showAutoSaveMessage = function( message ) { $autoSaveMessage.html( message ); $messageBox .show() .fadeTo( "fast", 1 ) .fadeTo( 2000 , 0.6 ); }; $messageBox = $('<div/>') .css({ display: "none", position: "absolute", "z-index": 10000, width: "100%", top: 0, height: "30px", "line-height": "30px", "border-bottom-style": "solid", "border-bottom-width": "1px", "border-bottom-color": "rgb(159,201,159", color: "rgb(80,80,80)", "font-size": "13px", "font-weight": "bold", "font-family": "Helvetica, Arial, sans-serif", "background-color": "rgb(212, 255, 212)" }) .appendTo("body"); $autoSaveMessage = $('<div id="autoSaveMessage"></div>') .css({ "text-align": "center" }) .appendTo( $messageBox ); intervalId = setInterval( autoSave, timeInterval ); pageObj.on('afterClose', function() { clearInterval( intervalId ); $messageBox.remove(); });