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;
});