closet hangers delete gets nifty ajax, too

app/controllers/closet_hangers_controller.rb

@@ -1,13 +1,13 @@
 class ClosetHangersController < ApplicationController
-  before_filter :authorize_user!, :only => [:destroy, :update]
+  before_filter :authorize_user!, :only => [:destroy, :create, :update]
-  before_filter :find_item, :only => [:destroy, :update]
+  before_filter :find_item, :only => [:destroy, :create, :update]
 
   def destroy
     @closet_hanger = current_user.closet_hangers.find_by_item_id!(@item.id)
     @closet_hanger.destroy
     respond_to do |format|
       format.html { redirect_after_destroy! }
-      format.js { render :json => true }
+      format.json { render :json => true }
     end
   end
 

public/javascripts/closet_hangers/index.js

@@ -2,6 +2,14 @@
   var hangersEl = $('#closet-hangers.current-user');
   hangersEl.addClass('js');
 
+  $.fn.disableForms = function () {
+    return this.data("formsDisabled", true).find("input").attr("disabled", "disabled").end();
+  }
+
+  $.fn.enableForms = function () {
+    return this.data("formsDisabled", false).find("input").removeAttr("disabled").end();
+  }
+
   $.fn.hasChanged = function () {
     return this.data('previousValue') != this.val();
   }
@@ -20,28 +28,33 @@
     });
   }
 
-  function submitForm(form) {
+  function submitUpdateForm(form) {
     if(form.data('loading')) return false;
     var input = form.children("input[type=number]");
     if(input.hasChanged()) {
       var objectWrapper = form.closest(".object").addClass("loading");
       var span = objectWrapper.find("span").text(input.val());
+      var data = form.serialize(); // get data before disabling inputs
+      objectWrapper.disableForms();
       form.data('loading', true);
-
       $.ajax({
         url: form.attr("action") + ".json",
         type: "post",
-        data: form.serialize(),
+        data: data,
         dataType: "json",
         complete: function (data) {
-          objectWrapper.removeClass("loading");
+          objectWrapper.removeClass("loading").enableForms();
           form.data('loading', false);
         },
         success: function () {
           input.storeValue();
         },
         error: function (xhr) {
-          var data = $.parseJSON(xhr.responseText);
+          try {
+            var data = $.parseJSON(xhr.responseText);
+          } catch(e) {
+            var data = {};
+          }
           input.revertValue();
           span.text(input.val());
           if(typeof data.errors != 'undefined') {
@@ -56,15 +69,40 @@
 
   hangersEl.find('form.closet-hanger-update').submit(function (e) {
     e.preventDefault();
-    submitForm($(this));
+    submitUpdateForm($(this));
   });
 
   hangersEl.find('input[type=number]').change(function () {
-    submitForm($(this).parent());
+    submitUpdateForm($(this).parent());
   }).storeValue();
 
   hangersEl.find('div.object').mouseleave(function () {
-    submitForm($(this).find('form.closet-hanger-update'));
+    submitUpdateForm($(this).find('form.closet-hanger-update'));
+  });
+
+  hangersEl.find("form.closet-hanger-destroy").submit(function (e) {
+    e.preventDefault();
+    var form = $(this);
+    var button = form.children("input").val("Removing…");
+    var objectWrapper = form.closest(".object").addClass("loading");
+    var data = form.serialize(); // get data before disabling inputs
+    objectWrapper.addClass("loading").disableForms();
+    $.ajax({
+      url: form.attr("action") + ".json",
+      type: "post",
+      data: data,
+      dataType: "json",
+      complete: function () {
+        button.val("Remove");
+      },
+      success: function () {
+        objectWrapper.hide(500);
+      },
+      error: function () {
+        objectWrapper.removeClass("loading").enableForms();
+        $.jGrowl("Error removing item. Try again?");
+      }
+    });
   });
 })();