Add spinners to all AJAX requests and prevent accidental double-clicks

app/controllers/addresses_controller.rb

@@ -1,12 +1,10 @@
 class AddressesController < ApplicationController
-  respond_to :json
-
   def show
     @address = Address.find_lat_lng("#{params[:address]}, #{params[:city_state]}")
     unless @address.blank?
-      respond_with @address
+      render(:json => @address)
     else
-      render :json => {"errors" => {"address" => ["Could not find address."]}}
+      render(:json => {"errors" => {"address" => ["Could not find address."]}})
     end
   end
 end

app/controllers/hydrants_controller.rb

@@ -3,15 +3,15 @@ class HydrantsController < ApplicationController
     @hydrant = Hydrant.find_by_id(params[:hydrant_id])
     if @hydrant.adopted?
       if user_signed_in? && current_user.id == @hydrant.user_id
-        render(:partial => "users/thank_you")
+        render("users/thank_you", :layout => "info_window")
       else
-        render(:partial => "users/profile")
+        render("users/profile", :layout => "info_window")
       end
     else
       if user_signed_in?
-        render(:partial => "adopt")
+        render("adopt", :layout => "info_window")
       else
-        render(:partial => "users/new")
+        render("users/new", :layout => "info_window")
       end
     end
   end

app/controllers/passwords_controller.rb

@@ -1,10 +1,7 @@
 class PasswordsController < Devise::PasswordsController
-  respond_to :json, :only => [:create, :update]
-
   # POST /resource/password
   def create
     self.resource = resource_class.send_reset_password_instructions(params[resource_name])
-
     if resource.errors.empty?
       render(:json => {"success" => true})
     else
@@ -22,7 +19,6 @@ class PasswordsController < Devise::PasswordsController
   # PUT /resource/password
   def update
     self.resource = resource_class.reset_password_by_token(params[resource_name])
-
     if resource.errors.empty?
       render(:json => {"success" => true})
     else

app/controllers/users_controller.rb

@@ -1,12 +1,12 @@
 class UsersController < Devise::RegistrationsController
   def edit
-    render_with_scope :edit
+    render("edit", :layout => "info_window")
   end
 
   def update
     if resource.update_with_password(params[resource_name])
-      sign_in resource_name, resource, :bypass => true
+      sign_in(resource_name, resource, :bypass => true)
-      redirect_to :controller => "hydrants", :action => "show", :hydrant_id => params[:hydrant_id]
+      redirect_to(:controller => "hydrants", :action => "show", :hydrant_id => params[:hydrant_id])
     else
       clean_up_passwords(resource)
       render(:json => {"errors" => resource.errors})

app/views/hydrants/adopt.html.erb

@@ -2,7 +2,7 @@
   <h2>Adopt this Hydrant</h2>
   <%= f.hidden_field "id" %>
   <%= f.hidden_field "user_id", :value => current_user.id %>
-  <%= f.label "name", "Give your hydrant a name", :id => "hydrant_name_label" %>
+  <%= f.label "name", "Give this hydrant a name", :id => "hydrant_name_label" %>
   <%= f.text_field "name", :tabindex => 1 %>
   <%= f.submit "Adopt!", :tabindex => 2, :id => "adoption_form_submit" %>
   <p>By adopting this hydrant, you agree to the <%= link_to "Terms of Service", "#", :tabindex => 3 %>.</p>

app/views/layouts/info_window.html.erb

@@ -0,0 +1,6 @@
+<div id="loader" style="display: none;">
+  <img src="/images/ajax-loader.gif" />
+</div>
+<div id="info_window">
+  <%= yield %>
+</div>

public/javascripts/application.js

@@ -38,34 +38,48 @@ $(function() {
       if(activeInfoWindow) {
         activeInfoWindow.close();
       }
-      $.get('/hydrant', {
-        'hydrant_id': hydrantId
-      }, function(data) {
       var infoWindow = new google.maps.InfoWindow({
-          content: data,
         maxWidth: 350
       });
-        infoWindow.open(map, marker);
+      activeInfoWindow = infoWindow;
       activeHydrantId = hydrantId;
       activeMarker = marker;
-        activeInfoWindow = infoWindow;
+      $.ajax({
+        type: 'GET',
+        url: '/hydrant',
+        data: {
+          'hydrant_id': hydrantId
+        },
+        success: function(data) {
+          // Prevent race condition, which could lead to multiple windows being open at the same time.
+          if(infoWindow == activeInfoWindow) {
+            infoWindow.setContent(data);
+            infoWindow.open(map, marker);
+          }
+        }
       });
     });
     hydrantIds.push(hydrantId);
   }
   function addMarkersAround(lat, lng) {
-    $.get('/hydrants.json', {
+    $.ajax({
+      type: 'GET',
+      url: '/hydrants.json',
+      data: {
         'commit': $('#address_submit').val(),
         'utf8': '✓',
         'authenticity_token': $('#address_form input[name="authenticity_token"]').val(),
         'lat': lat,
         'lng': lng
-    }, function(data) {
+      },
+      success: function(data) {
         if(data.errors) {
           $('#address_label').addClass('error', 500);
           $('#address').addClass('error', 500);
           $('#address').focus();
         } else {
+          $('#address_label').removeClass('error', 500);
+          $('#address').removeClass('error', 500);
           var northMost;
           var eastMost;
           var southMost;
@@ -99,6 +113,7 @@ $(function() {
           bounds = new google.maps.LatLngBounds(southWest, northEast);
           map.fitBounds(bounds);
         }
+      }
     });
   }
   google.maps.event.addListener(map, 'dragend', function() {
@@ -106,18 +121,30 @@ $(function() {
     addMarkersAround(center.lat(), center.lng());
   });
   $('#address_form').submit(function() {
+    var submitButton = $("#address_form input[type='submit']");
+    $(submitButton).attr("disabled", true);
+    var submitButtonText = $(submitButton).attr("value");
+    $(submitButton).attr("value", "Please Wait...");
     if($('#address').val() === '') {
+      $(submitButton).attr("disabled", false);
+      $(submitButton).attr("value", submitButtonText);
       $('#address_label').addClass('error', 500);
       $('#address').addClass('error', 500);
       $('#address').focus();
     } else {
-      $.get('/address.json', {
+      $.ajax({
+        type: 'GET',
+        url: '/address.json',
+        data: {
           'commit': $('#address_submit').val(),
           'utf8': '✓',
           'authenticity_token': $('#address_form input[name="authenticity_token"]').val(),
           'city_state': $('#city_state').val(),
           'address': $('#address').val()
-      }, function(data) {
+        },
+        success: function(data) {
+          $(submitButton).attr("disabled", false);
+          $(submitButton).attr("value", submitButtonText);
           if(data.errors) {
             $('#address_label').addClass('error', 500);
             $('#address').addClass('error', 500);
@@ -125,6 +152,7 @@ $(function() {
           } else {
             addMarkersAround(data[0], data[1]);
           }
+        }
       });
     }
     return false;
@@ -155,6 +183,8 @@ $(function() {
     }
   });
   $('#combo_form').live('submit', function() {
+    var submitButton = $("#combo_form input[type='submit']");
+    $(submitButton).attr("disabled", true);
     var errors = []
     if(!/[\w\.%\+\]+@[\w\]+\.+[\w]{2,}/.test($('#user_email').val())) {
       errors.push($('#user_email'));
@@ -182,9 +212,13 @@ $(function() {
         $('#user_password_confirmation').removeClass('error');
       }
       if(errors.length > 0) {
+        $(submitButton).attr("disabled", false);
         errors[0].focus();
       } else {
-        $.post('/users.json', {
+        $.ajax({
+          type: 'POST',
+          url: '/users.json',
+          data: {
             'commit': $('#user_sign_up_submit').val(),
             'utf8': '✓',
             'authenticity_token': $('#combo_form input[name="authenticity_token"]').val(),
@@ -197,8 +231,16 @@ $(function() {
               'password': $('#user_password_confirmation').val(),
               'password_confirmation': $('#user_password_confirmation').val()
             }
-        }, function(data) {
+          },
+          beforeSend: function() {
+            $('#info_window').hide();
+            $('#loader').show();
+          },
+          success: function(data) {
             if(data.errors) {
+              $('#loader').hide();
+              $('#info_window').show();
+              $(submitButton).attr("disabled", false);
               if(data.errors.email) {
                 errors.push($('#user_email'));
                 $('#user_email_label').addClass('error', 500);
@@ -231,12 +273,18 @@ $(function() {
               }
               errors[0].focus();
             } else {
-            $.get('/hydrant', {
+              $.ajax({
+                type: 'GET',
+                url: '/hydrant',
+                data: {
                   'hydrant_id': activeHydrantId
-            }, function(data) {
+                },
+                success: function(data) {
                   activeInfoWindow.setContent(data);
+                }
               });
             }
+          }
         });
       }
     } else if($(this).data('state') === 'user_sign_in') {
@@ -249,9 +297,13 @@ $(function() {
         $('#user_password').removeClass('error');
       }
       if(errors.length > 0) {
+        $(submitButton).attr("disabled", false);
         errors[0].focus();
       } else {
-        $.post('/users/sign_in.json', {
+        $.ajax({
+          type: 'POST',
+          url: '/users/sign_in.json',
+          data: {
             'commit': $('#user_sign_in_submit').val(),
             'utf8': '✓',
             'authenticity_token': $('#combo_form input[name="authenticity_token"]').val(),
@@ -260,33 +312,59 @@ $(function() {
               'password': $('#user_password').val(),
               'remember_me': $('#user_remember_me').val()
             }
-        }, function(data) {
+          },
+          beforeSend: function() {
+            $('#info_window').hide();
+            $('#loader').show();
+          },
+          success: function(data) {
             if(data.errors) {
+              $('#loader').hide();
+              $('#info_window').show();
+              $(submitButton).attr("disabled", false);
               $('#user_password_label').addClass('error', 500);
               $('#user_password').addClass('error', 500);
               $('#user_password').focus();
             } else {
-            $.get('/hydrant', {
+              $.ajax({
+                type: 'GET',
+                url: '/hydrant',
+                data: {
                   'hydrant_id': activeHydrantId
-            }, function(data) {
+                },
+                success: function(data) {
                   activeInfoWindow.setContent(data);
+                }
               });
             }
+          }
         });
       }
     } else if($(this).data('state') === 'user_forgot_password') {
       if(errors.length > 0) {
+        $(submitButton).attr("disabled", false);
         errors[0].focus();
       } else {
-        $.post('/users/password.json', {
+        $.ajax({
+          type: 'POST',
+          url: '/users/password.json',
+          data: {
             'commit': $('#user_forgot_password_submit').val(),
             'utf8': '✓',
             'authenticity_token': $('#combo_form input[name="authenticity_token"]').val(),
             'user': {
               'email': $('#user_email').val()
             }
-        }, function(data) {
+          },
+          beforeSend: function() {
+            $('#info_window').hide();
+            $('#loader').show();
+          },
+          success: function() {
             if(data.errors) {
+              $('#loader').hide();
+              $('#info_window').show();
+              $(submitButton).attr("disabled", false);
               $('#user_email_label').addClass('error', 500);
               $('#user_email').addClass('error', 500);
               $('#user_email').focus();
@@ -294,27 +372,49 @@ $(function() {
               $('#user_forgot_password_fields').slideUp();
               $('#user_sign_in_fields').slideDown();
             }
+          }
         });
       }
     }
     return false;
   });
   $('#sign_out_form').live('submit', function() {
-    $.get('/users/sign_out.json', {
+    var submitButton = $("#sign_out_form input[type='submit']");
+    $(submitButton).attr("disabled", true);
+    $.ajax({
+      type: 'GET',
+      url: '/users/sign_out.json',
+      data: {
         'commit': $('#sign_out_form_submit').val(),
         'utf8': '✓',
         'authenticity_token': $('#sign_out_form input[name="authenticity_token"]').val()
-    }, function(data) {
+      },
-      $.get('/hydrant', {
+      beforeSend: function() {
+        $('#info_window').hide();
+        $('#loader').show();
+      },
+      success: function(data) {
+        $.ajax({
+          type: 'GET',
+          url: '/hydrant',
+          data: {
             'hydrant_id': activeHydrantId
-      }, function(data) {
+          },
+          success: function(data) {
             activeInfoWindow.setContent(data);
+          }
         });
+      }
     });
     return false;
   });
   $('#adoption_form').live('submit', function() {
-    $.post('/hydrant', {
+    var submitButton = $("#adoption_form input[type='submit']");
+    $(submitButton).attr("disabled", true);
+    $.ajax({
+      type: 'POST',
+      url: '/hydrant',
+      data: {
         'id': $('#hydrant_id').val(),
         'commit': $('#adoption_form_submit').val(),
         'utf8': '✓',
@@ -324,10 +424,20 @@ $(function() {
           'user_id': $('#hydrant_user_id').val(),
           'name': $('#hydrant_name').val()
         }
-    }, function(data) {
+      },
-      $.get('/hydrant', {
+      beforeSend: function() {
+        $('#info_window').hide();
+        $('#loader').show();
+      },
+      success: function(data) {
+        $.ajax({
+          type: 'GET',
+          url: '/hydrant',
+          data: {
             'hydrant_id': activeHydrantId
-      }, function(data) {
+          },
+          success: function(data) {
+            activeInfoWindow.setContent(data);
             activeInfoWindow.setContent(data);
             image = new google.maps.MarkerImage('/images/markers/green.png',
               new google.maps.Size(27.0, 37.0),
@@ -336,14 +446,21 @@ $(function() {
             );
             activeMarker.setIcon(image);
             activeMarker.setAnimation(google.maps.Animation.BOUNCE);
+          }
         });
+      }
     });
     return false;
   });
   $('#abandon_form').live('submit', function() {
     var answer = window.confirm("Are you sure you want to abandon this hydrant?")
     if(answer) {
-      $.post('/hydrant', {
+      var submitButton = $("#abandon_form input[type='submit']");
+      $(submitButton).attr("disabled", true);
+      $.ajax({
+        type: 'POST',
+        url: '/hydrant',
+        data: {
           'id': $('#hydrant_id').val(),
           'commit': $('#abandon_form_submit').val(),
           'utf8': '✓',
@@ -353,10 +470,19 @@ $(function() {
             'user_id': $('#hydrant_user_id').val(),
             'name': $('#hydrant_name').val()
           }
-      }, function(data) {
+        },
-        $.get('/hydrant', {
+        beforeSend: function() {
+          $('#info_window').hide();
+          $('#loader').show();
+        },
+        success: function(data) {
+          $.ajax({
+            type: 'GET',
+            url: '/hydrant',
+            data: {
               'hydrant_id': activeHydrantId
-        }, function(data) {
+            },
+            success: function(data) {
               activeInfoWindow.setContent(data);
               image = new google.maps.MarkerImage('/images/markers/red.png',
                 new google.maps.Size(27.0, 37.0),
@@ -365,7 +491,9 @@ $(function() {
               );
               activeMarker.setIcon(image);
               activeMarker.setAnimation(null);
+            }
           });
+        }
       });
       return false;
     }
@@ -373,7 +501,12 @@ $(function() {
   $('#steal_form').live('submit', function() {
     var answer = window.confirm("Are you sure you want to steal this hydrant?")
     if(answer) {
-      $.post('/hydrant', {
+      var submitButton = $("#steal_form input[type='submit']");
+      $(submitButton).attr("disabled", true);
+      $.ajax({
+        type: 'POST',
+        url: '/hydrant',
+        data: {
           'id': $('#hydrant_id').val(),
           'commit': $('#steal_form_submit').val(),
           'utf8': '✓',
@@ -383,10 +516,19 @@ $(function() {
             'user_id': $('#hydrant_user_id').val(),
             'name': $('#hydrant_name').val()
           }
-      }, function(data) {
+        },
-        $.get('/hydrant', {
+        beforeSend: function() {
+          $('#info_window').hide();
+          $('#loader').show();
+        },
+        success: function(data) {
+          $.ajax({
+            type: 'GET',
+            url: '/hydrant',
+            data: {
               'hydrant_id': activeHydrantId
-        }, function(data) {
+            },
+            success: function(data) {
               activeInfoWindow.setContent(data);
               image = new google.maps.MarkerImage('/images/markers/red.png',
                 new google.maps.Size(27.0, 37.0),
@@ -395,22 +537,35 @@ $(function() {
               );
               activeMarker.setIcon(image);
               activeMarker.setAnimation(null);
+            }
           });
+        }
       });
       return false;
     }
   });
   $('#edit_profile_form').live('submit', function() {
-    $.get('/users/edit', {
+    $.ajax({
+      type: 'GET',
+      url: '/users/edit',
+      data: {
         'commit': $('#edit_profile_form_submit').val(),
         'utf8': '✓',
         'authenticity_token': $('#edit_profile_form input[name="authenticity_token"]').val()
-    }, function(data) {
+      },
+      beforeSend: function() {
+        $('#info_window').hide();
+        $('#loader').show();
+      },
+      success: function(data) {
         activeInfoWindow.setContent(data);
+      }
     });
     return false;
   });
   $('#edit_form').live('submit', function() {
+    var submitButton = $("#edit_form input[type='submit']");
+    $(submitButton).attr("disabled", true);
     var errors = []
     if(!/[\w\.%\+\]+@[\w\]+\.+[\w]{2,}/.test($('#user_email').val())) {
       errors.push($('#user_email'));
@@ -445,9 +600,13 @@ $(function() {
       $('#user_current_password').removeClass('error');
     }
     if(errors.length > 0) {
+      $(submitButton).attr("disabled", false);
       errors[0].focus();
     } else {
-      $.post('/users.json', {
+      $.ajax({
+        type: 'POST',
+        url: '/users.json',
+        data: {
           'id': $('#id').val(),
           'hydrant_id': activeHydrantId,
           'commit': $('#edit_form_submit').val(),
@@ -464,8 +623,16 @@ $(function() {
             'password_confirmation': $('#user_password').val(),
             'current_password': $('#user_current_password').val()
           }
-      }, function(data) {
+        },
+        beforeSend: function() {
+          $('#info_window').hide();
+          $('#loader').show();
+        },
+        success: function(data) {
           if(data.errors) {
+            $('#loader').hide();
+            $('#info_window').show();
+            $(submitButton).attr("disabled", false);
             if(data.errors.email) {
               errors.push($('#user_email'));
               $('#user_email_label').addClass('error', 500);
@@ -505,6 +672,7 @@ $(function() {
           } else {
             activeInfoWindow.setContent(data);
           }
+        }
       });
     }
     return false;