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.

 

  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

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>