Hi Guys,
Well for a project sometime back I have to do a plugin which I never end up sharing. So I thought why not bring back the old stuff back to life.
Here is that plugin which I named as jcautosave
The code is available on GIT and is available for FREE under GPL license
Lets check on some key details
Example Markup
|
1 2 3 4 |
<div contenteditable="true" id="autosave" style="width:450px;height: 250px; padding: 5px; border: 1px solid #EEEEEE;border-radius: 10px" data-url="example.html" data-event="keyup"></div> <div id="message" style="width:450px"></div> <input id="name" data-url="example.html" data-event="change" > <div id="message-name" style="width:450px"></div> |
Now lets check on how we can make use of this plugin.
Example Usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$("#autosave").jcautosave({ sendAutoSaveOn:"interval", interval:10000, // 10 seconds before:function(data,element){ $("#message").html("Saving.."); }, success:function(data,element){ $("#message").html("Saved"); }, error:function(error,element){ $("#message").html("Error"); } }); // autosave above will send data to the specified url take from "data-url" attribute in the div#autosave $("#name").jcautosave({ before:function(data,element){ $("#message-name").html("Saving.."); }, success:function(data,element){ $("#message-name").html("Saved"); }, error:function(error,element){ $("#message-name").html("Error"); } }); // autosave above will be triggered on "change" event to the specified url take from "data-url" attribute in the input#name |
Options
You can pass any of these options to the .jcautosave() function:
| Option | Type | Default | Description |
|---|---|---|---|
| sendAutoSaveOn | enum | event | event || intervalbased on this setting you must also supply a value for event || interval property, In case the value is set to interval A post if made every interval milliseconds else it is fired on an event. |
| url | string | null | Url use to post ajax data. You can also use data-url in the input/div tag itself to sepecify the target URL. |
| event | string | change | See jQuery.bind for options |
| interval | int | 5000 | This specify the interval just in case selected auto save mechanism is interval |
| success | function | function(data,$jqueryEl){} | Once Ajax call is successfully completed |
| error | function | function(error,$jqueryEl){} | Callback function in case there is an error |
| before | function | function(data,$jqueryEl){} | Callback function on “beforeSend” |
| after | function | function(data,$jqueryEl){} | Callback function to cleanup anything and is triggered after success/error |
| sendUpdatesWhenDataChangeIsDetected | bool | true | This settings tries to check if there is any data change only then send the ajax post else any of ajax related logic will not fire |
Demo
A demo has been made available from here
http://jaspreetchahal.org/examples/jquery-examples/jcautosave/example.html
Dependencies
jQuery 1.5+
Works with
Tested on all major browsers’ latest releases
Donations
If you like this Plugin, please consider donating
You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work.
If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to
help support future updates and development.
Main uses of Donations
- Web Hosting Fees
- Cable Internet Fees
- Time/Value Reimbursement
- Motivation for Continuous Improvements
Changelog
1.0
* Initial Release
Future change log available from GIT
Download and maintenanace releases
https://github.com/jaschahal/jcautosave
Bug Report
Please report issues by leaving comments here
License
MIT LICENSE
/*Copyright 2012 Jaspreet Chahal
http://jaspreetchahal.org/Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
“Software”), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.Donations are welcome!
http://jaspreetchahal.org/jcautosave-a-simple-jquery-plugin-to-autosave-data-on-contenteditable-containers-or-form-fields
*/
I hope that this plugin does help you out.
Cheers
* inspired from https://github.com/cfurrow/jquery.autosave.js
Fantastic plugin, really!
Is possible to send the data via POST requests? 🙂
Mirko