How to implement auto-save feature

Categories PHP

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.

 

  1.  
  2. // to log off user automatically after a certain amount of incativity 
  3. // uncomment one of the following lines
  4. // 120 is time in minutes, meaning two hours
  5.  
  6. // PHPRunner
  7. // setTimeout("window.location='login.php?a=logout'",120*1000*60);
  8.  
  9. // ASPRunnerPro
  10. //setTimeout("window.location='login.asp?a=logout'",120*1000*60);
  11.  
  12. // ASPRunner.NET
  13. // setTimeout("window.location='login?a=logout'",120*1000*60);
  14.  
  15. var interval=5*1000; // auto-save every 5 seconds
  16.  
  17. if ( inlineObject ) {
  18. 	return;
  19. }
  20.  
  21. $("body").css("margin-top","20px");
  22. $("body").css("padding-left","0px");
  23. var $messageBox, $autoSaveMessage,
  24. 	timeInterval = interval,
  25. 	autoSave =  function() {
  26. 		var form, i, ctrl, baseParams, intervalId,
  27. 			fieldControls = [],
  28. 			constants = Runner.controls.constants,
  29. 			controls = Runner.controls.ControlManager.getVisibleAt( pageObj.tName, pageObj.pageId ),
  30. 			fileFormats = [ constants.EDIT_FORMAT_DATABASE_IMAGE, constants.EDIT_FORMAT_DATABASE_FILE, constants.EDIT_FORMAT_FILE ];
  31.  
  32. 		baseParams = $.extend( {}, pageObj.baseParams, {
  33. 			fly: 1,
  34. 			onFly: 1,
  35. 			editType: Runner.pages.constants.EDIT_POPUP
  36. 		});
  37.  
  38. 		for (i = 0; i < controls.length; i++) {
  39. 			ctrl = controls[i];
  40. 			if ( $.inArray( ctrl.fieldName, pageObj.keyFields ) === -1 &&  $.inArray( ctrl.editFormat, fileFormats ) === -1 ) {
  41. 				ctrl = $.extend( {}, ctrl, { validationArr: [] } );
  42. 				fieldControls.push( ctrl );
  43. 			}
  44. 		}		 
  45.  
  46. 		baseParams["fly"] = 1;
  47. 		baseParams["onFly"] = 1;
  48. 		baseParams["editType"] = Runner.pages.constants.EDIT_POPUP;
  49.  
  50. 		form = new Runner.form.BasicForm({
  51. 			method: 'POST',
  52. 			id: pageObj.pageId,
  53. 			isFileUpload: true,
  54. 			baseParams: baseParams,
  55. 			fieldControls: fieldControls,
  56. 			submitUrl: pageObj.submitUrl,
  57. 			beforeSubmit: {
  58. 				fn: function( formObj ) {
  59. 					return this.fireEvent( "beforeSave", formObj, formObj.fieldControls, this );
  60. 				},
  61. 				scope: pageObj
  62. 			},
  63. 			submitFailed: {
  64. 				fn: function( response, formObj, fieldControls ) {
  65. 					showAutoSaveMessage( "Record has not been saved" );
  66. 					formObj.destructor( false );
  67. 				},
  68. 				scope: pageObj
  69. 			},
  70. 			successSubmit: {
  71. 				fn: function( response, formObj, fieldControls ) {
  72. 					if ( response.success ) {
  73. 						pageObj.hideBrick('message');
  74. 						showAutoSaveMessage( "Record has been saved" );
  75. 					} else {
  76. 						pageObj.displayHalfPreparedMessage( response.message || "" );
  77. 						pageObj.showBrick('message');
  78. 						$messageBox.hide();
  79. 					}
  80. 					formObj.destructor( false );
  81. 				},
  82. 				scope: pageObj			
  83. 			}			
  84. 		});
  85.  
  86. 		form.submit();
  87. 	},
  88. 	showAutoSaveMessage = function( message ) {		
  89. 		$autoSaveMessage.html( message );
  90. 		$messageBox
  91. 			.show()
  92. 			.fadeTo( "fast", 1 )
  93. 			.fadeTo( 2000 , 0.6 );
  94. 	}; 
  95.  
  96. $messageBox = $('<div/>')
  97. 	.css({
  98. 		display: "none",
  99. 		position: "absolute",
  100. 		"z-index": 10000,
  101. 		width: "100%",
  102. 		top: 0,
  103. 		height: "30px",
  104. 		"line-height": "30px",
  105. 		"border-bottom-style": "solid",
  106. 		"border-bottom-width": "1px",
  107. 		"border-bottom-color": "rgb(159,201,159",
  108. 		color: "rgb(80,80,80)",
  109. 		"font-size": "13px",
  110. 		"font-weight": "bold",
  111. 		"font-family": "Helvetica, Arial, sans-serif",
  112. 		"background-color": "rgb(212, 255, 212)"
  113. 	})
  114. 	.appendTo("body");	
  115.  
  116. $autoSaveMessage = $('<div id="autoSaveMessage"></div>')
  117. 	.css({
  118. 		"text-align": "center"
  119. 	})
  120. 	.appendTo( $messageBox );
  121.  
  122. intervalId = setInterval( autoSave, timeInterval );
  123.  
  124. pageObj.on('afterClose', function() {
  125. 	clearInterval( intervalId );
  126. 	$messageBox.remove();
  127. });
  128.  
  129.  

Leave a Reply

Your email address will not be published. Required fields are marked *