closet hangers delete gets nifty ajax, too

This commit is contained in:
Emi Matchu 2011-07-15 23:39:19 -04:00
parent 77818471c5
commit e72c9a0092
2 changed files with 49 additions and 11 deletions

View file

@ -1,13 +1,13 @@
class ClosetHangersController < ApplicationController
before_filter :authorize_user!, :only => [:destroy, :update]
before_filter :find_item, :only => [:destroy, :update]
before_filter :authorize_user!, :only => [:destroy, :create, :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

View file

@ -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) {
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?");
}
});
});
})();