diff --git a/apps/customercare/templates/customercare/reply_modal.html b/apps/customercare/templates/customercare/reply_modal.html index 2f496d3978d..ce3da129b0c 100644 --- a/apps/customercare/templates/customercare/reply_modal.html +++ b/apps/customercare/templates/customercare/reply_modal.html @@ -46,7 +46,7 @@

Get personal

Your message was sent! - + Submit diff --git a/media/css/customercare.css b/media/css/customercare.css index fbbc174eb7f..4f8765a1703 100644 --- a/media/css/customercare.css +++ b/media/css/customercare.css @@ -411,11 +411,31 @@ cursor: pointer; float: right; height: 36px; + line-height: 36px; margin-top: 10px; + text-align: center; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); width: 140px; } +#submit-busy { + display: none; + height: 13px; + padding-left: 5px; + width: 13px; +} + +#reply .submitButton.busy { + background: -moz-linear-gradient(center top, #ccc 15px, #ccc 18px, #aaa, #aaa); + background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #ccc), color-stop(.5, #ccc), color-stop(.75, #aaa), to(#aaa)); + border-color: #aaa; + color: #666; +} + +#reply .submitButton.busy #submit-busy { + display: inline; +} + #reply .character-counter { color: #fff; float: right; diff --git a/media/js/customercare.js b/media/js/customercare.js index 699a4b59932..8f3a1579d51 100644 --- a/media/js/customercare.js +++ b/media/js/customercare.js @@ -177,32 +177,38 @@ this.$el.find('#submit').bind('click', {reply: this}, function(e) { var reply = e.data.reply, data = { - 'content': reply.content, - 'reply_to': reply.tweet.id, - }; - - $.ajax({ - url: reply.action, - data: data, - type: 'POST', - success: function(data) { - // Remember reply ID. - last_reply.id = reply.tweet.id; - mark_last_reply(); - - reply.$success_msg.show(); - setTimeout(function() { - reply.close(); - }, 2000); + 'content': reply.content, + 'reply_to': reply.tweet.id, }, - error: function(data) { - reply.$error_msg.text(data.responseText); - reply.$error_msg.show(); - setTimeout(function() { - reply.$error_msg.fadeOut(); - }, 4000); - }, - }); + $btn = $(this); + if (!$btn.is('.busy')) { + $btn.addClass('busy'); + $.ajax({ + url: reply.action, + data: data, + type: 'POST', + success: function(data) { + // Remember reply ID. + last_reply.id = reply.tweet.id; + mark_last_reply(); + + reply.$success_msg.show(); + setTimeout(function() { + reply.close(); + }, 2000); + }, + error: function(data) { + reply.$error_msg.text(data.responseText); + reply.$error_msg.show(); + setTimeout(function() { + reply.$error_msg.fadeOut(); + }, 4000); + }, + complete: function() { + $btn.removeClass('busy'); + } + }); + } e.preventDefault(); return false; });