4 ms·

JQuery Autosave

23 points by jmonegro 17y ago

csytan 17y ago
Nice, but I question if this needs to be made into a plugin. There's a need to hook up things on the server side, and the same thing can be accomplished by writing 20 lines of code. Here's something I wrote for my translation site: jQuery(function($){ var save_txt = '{{ _('Save') }}'; var saving_txt = '{{ _('Saving...') }}'; var saved_txt = '{{ _('Saved') }}'; function save(){ $('#save').val(saving_txt).attr('disabled', 'disabled'); $.post(window.location.pathname, { action: 'save', translated_text: $('#translated_text').val() }, function(html){ $('#save').val(saved_txt); }); } var timer; $('#translated_text').keyup(function(){ window.clearTimeout(timer); $('#save').val(save_txt).attr('disabled', null); timer = window.setTimeout(save, 5000); }) .focus(); $('#save').click(function(){ window.clearTimeout(timer); save(); return false; }); });
GrandMasterBirt 17y ago
Multiple issues I solved when doing similar things: 1) Must have some sort of queue-like behavior, or race conditions. In other words I want a guarantee that all saves happen in order (imagine a checkbox, and due to latency in network traffic of the user checks it on, then off. What state was saved the on or off for one of them? I don't like these race conditions) this can happen for any input type. 2) What happens if the data must be extracted weirdly, or weird parameters sent to the url. A data extractor is a useful concept to have be passed in. 3) Indication to the user that it works. Like what gmail does. A useful feature. 4) What if its not a form, or different elements go to different urls? Also a useful thing to do. This sort of tool became a cornerstone of some very cool form interaction mechanisms. I guess the idea of this plugin would be to have a gracefully-degrading auto-saving form that preserves values while the user types for recovery purposes.
tkahn6 17y ago
This seems overly complicated. I just set live click and change listeners on the elements I was looking to save and incremented a change_counter each time these were triggered. if (change_counter % 5 == 0) Data.sendData();

23 points by jmonegro 17y ago

Nice, but I question if this needs to be made into a plugin. There's a need to hook up things on the server side, and the same thing can be accomplished by writing 20 lines of code. Here's something I wrote for my translation site: jQuery(function($){ var save_txt = '{{ _('Save') }}'; var saving_txt = '{{ _('Saving...') }}'; var saved_txt = '{{ _('Saved') }}'; function save(){ $('#save').val(saving_txt).attr('disabled', 'disabled'); $.post(window.location.pathname, { action: 'save', translated_text: $('#translated_text').val() }, function(html){ $('#save').val(saved_txt); }); } var timer; $('#translated_text').keyup(function(){ window.clearTimeout(timer); $('#save').val(save_txt).attr('disabled', null); timer = window.setTimeout(save, 5000); }) .focus(); $('#save').click(function(){ window.clearTimeout(timer); save(); return false; }); });

GrandMasterBirt 17y ago

Multiple issues I solved when doing similar things: 1) Must have some sort of queue-like behavior, or race conditions. In other words I want a guarantee that all saves happen in order (imagine a checkbox, and due to latency in network traffic of the user checks it on, then off. What state was saved the on or off for one of them? I don't like these race conditions) this can happen for any input type. 2) What happens if the data must be extracted weirdly, or weird parameters sent to the url. A data extractor is a useful concept to have be passed in. 3) Indication to the user that it works. Like what gmail does. A useful feature. 4) What if its not a form, or different elements go to different urls? Also a useful thing to do. This sort of tool became a cornerstone of some very cool form interaction mechanisms. I guess the idea of this plugin would be to have a gracefully-degrading auto-saving form that preserves values while the user types for recovery purposes.

tkahn6 17y ago

This seems overly complicated. I just set live click and change listeners on the elements I was looking to save and incremented a change_counter each time these were triggered. if (change_counter % 5 == 0) Data.sendData();