How to implement auto-save feature

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();
});