{"id":950,"date":"2014-05-19T15:27:21","date_gmt":"2014-05-19T20:27:21","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=950"},"modified":"2016-05-31T13:05:29","modified_gmt":"2016-05-31T18:05:29","slug":"how-to-implement-auto-save-feature","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2014\/05\/19\/how-to-implement-auto-save-feature\/","title":{"rendered":"How to implement auto-save feature"},"content":{"rendered":"<p>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.<\/p>\n<p>Here is how it looks right after record was saved:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/05\/autosave.png\" alt=\"\" title=\"autosave\" width=\"696\" height=\"332\" class=\"aligncenter size-full wp-image-956\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/05\/autosave.png 696w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/05\/autosave-300x143.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/05\/autosave-150x71.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2014\/05\/autosave-400x190.png 400w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><\/p>\n<p><strong>Limitations:<\/strong><\/p>\n<ul>\n<li>uploaded files are not saved automatically\n<li>if page shows one details tables &#8211; details won&#8217;t be saved automatically\n<\/ul>\n<p>The code below can be pasted as is to any Edit page Javascript OnLoad event.<\/p>\n<p>&nbsp;<\/p>\n<pre lang=\"javascript\">\r\n\/\/ to log off user automatically after a certain amount of incativity \r\n\/\/ uncomment one of the following lines\r\n\/\/ 120 is time in minutes, meaning two hours\r\n\r\n\/\/ PHPRunner\r\n\/\/ setTimeout(\"window.location='login.php?a=logout'\",120*1000*60);\r\n\r\n\/\/ ASPRunnerPro\r\n\/\/setTimeout(\"window.location='login.asp?a=logout'\",120*1000*60);\r\n\r\n\/\/ ASPRunner.NET\r\n\/\/ setTimeout(\"window.location='login?a=logout'\",120*1000*60);\r\n\r\nvar interval=5*1000; \/\/ auto-save every 5 seconds\r\n\r\nif ( inlineObject ) {\r\n\treturn;\r\n}\r\n\r\n$(\"body\").css(\"margin-top\",\"20px\");\r\n$(\"body\").css(\"padding-left\",\"0px\");\r\nvar $messageBox, $autoSaveMessage,\r\n\ttimeInterval = interval,\r\n\tautoSave =  function() {\r\n\t\tvar form, i, ctrl, baseParams, intervalId,\r\n\t\t\tfieldControls = [],\r\n\t\t\tconstants = Runner.controls.constants,\r\n\t\t\tcontrols = Runner.controls.ControlManager.getVisibleAt( pageObj.tName, pageObj.pageId ),\r\n\t\t\tfileFormats = [ constants.EDIT_FORMAT_DATABASE_IMAGE, constants.EDIT_FORMAT_DATABASE_FILE, constants.EDIT_FORMAT_FILE ];\r\n\t\t\r\n\t\tbaseParams = $.extend( {}, pageObj.baseParams, {\r\n\t\t\tfly: 1,\r\n\t\t\tonFly: 1,\r\n\t\t\teditType: Runner.pages.constants.EDIT_POPUP\r\n\t\t});\r\n\t\t\r\n\t\tfor (i = 0; i < controls.length; i++) {\r\n\t\t\tctrl = controls[i];\r\n\t\t\tif ( $.inArray( ctrl.fieldName, pageObj.keyFields ) === -1 &#038;&#038;  $.inArray( ctrl.editFormat, fileFormats ) === -1 ) {\r\n\t\t\t\tctrl = $.extend( {}, ctrl, { validationArr: [] } );\r\n\t\t\t\tfieldControls.push( ctrl );\r\n\t\t\t}\r\n\t\t}\t\t \r\n\t\t\r\n\t\tbaseParams[\"fly\"] = 1;\r\n\t\tbaseParams[\"onFly\"] = 1;\r\n\t\tbaseParams[\"editType\"] = Runner.pages.constants.EDIT_POPUP;\r\n\t\t\r\n\t\tform = new Runner.form.BasicForm({\r\n\t\t\tmethod: 'POST',\r\n\t\t\tid: pageObj.pageId,\r\n\t\t\tisFileUpload: true,\r\n\t\t\tbaseParams: baseParams,\r\n\t\t\tfieldControls: fieldControls,\r\n\t\t\tsubmitUrl: pageObj.submitUrl,\r\n\t\t\tbeforeSubmit: {\r\n\t\t\t\tfn: function( formObj ) {\r\n\t\t\t\t\treturn this.fireEvent( \"beforeSave\", formObj, formObj.fieldControls, this );\r\n\t\t\t\t},\r\n\t\t\t\tscope: pageObj\r\n\t\t\t},\r\n\t\t\tsubmitFailed: {\r\n\t\t\t\tfn: function( response, formObj, fieldControls ) {\r\n\t\t\t\t\tshowAutoSaveMessage( \"Record has not been saved\" );\r\n\t\t\t\t\tformObj.destructor( false );\r\n\t\t\t\t},\r\n\t\t\t\tscope: pageObj\r\n\t\t\t},\r\n\t\t\tsuccessSubmit: {\r\n\t\t\t\tfn: function( response, formObj, fieldControls ) {\r\n\t\t\t\t\tif ( response.success ) {\r\n\t\t\t\t\t\tpageObj.hideBrick('message');\r\n\t\t\t\t\t\tshowAutoSaveMessage( \"Record has been saved\" );\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tpageObj.displayHalfPreparedMessage( response.message || \"\" );\r\n\t\t\t\t\t\tpageObj.showBrick('message');\r\n\t\t\t\t\t\t$messageBox.hide();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tformObj.destructor( false );\r\n\t\t\t\t},\r\n\t\t\t\tscope: pageObj\t\t\t\r\n\t\t\t}\t\t\t\r\n\t\t});\r\n\t\t\r\n\t\tform.submit();\r\n\t},\r\n\tshowAutoSaveMessage = function( message ) {\t\t\r\n\t\t$autoSaveMessage.html( message );\r\n\t\t$messageBox\r\n\t\t\t.show()\r\n\t\t\t.fadeTo( \"fast\", 1 )\r\n\t\t\t.fadeTo( 2000 , 0.6 );\r\n\t}; \r\n\r\n$messageBox = $('&lt;div\/>')\r\n\t.css({\r\n\t\tdisplay: \"none\",\r\n\t\tposition: \"absolute\",\r\n\t\t\"z-index\": 10000,\r\n\t\twidth: \"100%\",\r\n\t\ttop: 0,\r\n\t\theight: \"30px\",\r\n\t\t\"line-height\": \"30px\",\r\n\t\t\"border-bottom-style\": \"solid\",\r\n\t\t\"border-bottom-width\": \"1px\",\r\n\t\t\"border-bottom-color\": \"rgb(159,201,159\",\r\n\t\tcolor: \"rgb(80,80,80)\",\r\n\t\t\"font-size\": \"13px\",\r\n\t\t\"font-weight\": \"bold\",\r\n\t\t\"font-family\": \"Helvetica, Arial, sans-serif\",\r\n\t\t\"background-color\": \"rgb(212, 255, 212)\"\r\n\t})\r\n\t.appendTo(\"body\");\t\r\n\t\r\n$autoSaveMessage = $('&lt;div id=\"autoSaveMessage\">&lt;\/div>')\r\n\t.css({\r\n\t\t\"text-align\": \"center\"\r\n\t})\r\n\t.appendTo( $messageBox );\r\n\t\r\nintervalId = setInterval( autoSave, timeInterval );\r\n\r\npageObj.on('afterClose', function() {\r\n\tclearInterval( intervalId );\r\n\t$messageBox.remove();\r\n});\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8211; details won&#8217;t be saved automatically The code below can be pasted as is to any Edit page Javascript OnLoad event. &nbsp; \/\/ to log off user automatically after a certain amount of incativity&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2014\/05\/19\/how-to-implement-auto-save-feature\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;How to implement auto-save feature&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-950","post","type-post","status-publish","format-standard","hentry","category-php-category"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":8,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions\/955"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}