Permalink
Browse files

Use in-browser html5 localStorage to remember widget values

  • Loading branch information...
1 parent deaf7f6 commit ba4de0bea7424a8c164a998c992858e8ac2b6e3f @mozz100 committed Mar 21, 2012
Showing with 60 additions and 31 deletions.
  1. +57 −0 public/js/app.js
  2. +3 −31 views/index.erb
View
@@ -0,0 +1,57 @@
+// see http://diveintohtml5.info/storage.html
+function supports_html5_storage() {
+ try {
+ return 'localStorage' in window && window['localStorage'] !== null;
+ } catch (e) {
+ return false;
+ }
+}
+
+$(function() {
+
+ input_selector = ':input[type!="hidden"][type!="submit"]';
+
+ // intercept form submit and do by AJAX instead
+ $('form').submit(function(e) {
+ frm = $(this);
+ frm.find('input:submit').attr({disabled: true, value: 'Updating...'});
+ $('#feedback').fadeOut('fast');
+ $.ajax({
+ context: frm,
+ complete: function() {
+ // reset ui to normal
+ $(this).find('input:submit').attr({disabled: null, value: 'Update'});
+
+ // save the value into localstorage
+ if (supports_html5_storage()) {
+ $(this).find(input_selector).each(function(i, input) {
+ localStorage.setItem(input.id, $(input).val());
+ });
+ }
+ },
+ data: frm.serialize(),
+ error: function(jqXHR, textStatus, errorThrown) {
+ alert('An error occurred.\n' + errorThrown);
+ },
+ success: function(data) {
+ $('#feedback').hide().removeClass();
+ $('#feedback').text(data);
+ $('#feedback').addClass('alert alert-success').fadeIn();
+ },
+ type: 'POST',
+ url: '/push'
+ });
+ e.preventDefault();
+ });
+
+ if (supports_html5_storage()) {
+ // retrieve the values that this user last used for the geckoboard.
+ $('form').each(function(i, frm) {
+ //alert(frm.id);
+ $(frm).find(input_selector).each(function(i, input) {
+ $(input).val(localStorage.getItem(input.id));
+ });
+ });
+ }
+})
+
View
@@ -3,35 +3,7 @@
<title>Geckoboard update</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function() {
- $('form').submit(function(e) {
- // intercept form submit and do by AJAX instead
- frm = $(this);
- frm.find('input:submit').attr({disabled: true, value: 'Updating...'});
- $('#feedback').fadeOut('fast');
- $.ajax({
- context: frm,
- complete: function() {
- // reset ui to normal
- $(this).find('input:submit').attr({disabled: null, value: 'Update'});
- },
- data: frm.serialize(),
- error: function(jqXHR, textStatus, errorThrown) {
- alert('An error occurred.\n' + errorThrown);
- },
- success: function(data) {
- $('#feedback').hide().removeClass();
- $('#feedback').text(data);
- $('#feedback').addClass('alert alert-success').fadeIn();
- },
- type: 'POST',
- url: '/push'
- });
- e.preventDefault();
- });
- })
- </script>
+ <script type="text/javascript" src="/js/app.js"></script>
<style>input {height: 28px;}</style>
</head>
<body>
@@ -46,13 +18,13 @@
</div>
</div>
<% @widgets.select{|w| w['type'] == 'text'}.each do |widget| %>
- <form method="POST" action="/push" class="form-horizontal">
+ <form method="POST" action="/push" class="form-horizontal" id="frm_<%= widget['key'] %>">
<label for="text"><%= widget['label'] %></label>
<span class="input">
<% (widget['num_pages'] || 1).times do |p| %>
<input
type="text"
- id="text"
+ id="text_<%= widget['key'] %>_<%= p %>"
name="widget_data[][text]"
class="input-xlarge"
placeholder="<%= p == 0 ? "(text)" : "page #{p+1} (optional)" %>"

0 comments on commit ba4de0b

Please sign in to comment.