Disable submit button on button click to avoid multiple ajax calls

 - Also, add test for the functionality
 - Bump version to 1.2.7

Summary: If submit button is clicked multiple times, multiple
ajax requests are sent. To avoid this, we disable the submit
button as soon as the submit button is clicked and enable it
again at the end of the ajax call depending on the response
from backend. This commit addresses EDUCATOR-273 issued in
openedx JIRA.

poll/public/js/poll.js

@@ -50,6 +50,8 @@ function PollUtil (runtime, element, pollType) {
         var selector = 'input[name=choice]:checked';
         var radio = $(selector, element);
         self.submit.click(function () {
+            // Disable the submit button to avoid multiple clicks
+            self.disableSubmit();
             // We can't just use radio.selector here because the selector
             // is mangled if this is the first time this XBlock is added in
             // studio.
@@ -90,6 +92,8 @@ function PollUtil (runtime, element, pollType) {
         }
         self.answers.bind("change.enableSubmit", self.verifyAll);
         self.submit.click(function () {
+            // Disable the submit button to avoid multiple clicks
+            self.disableSubmit();
             $.ajax({
                 type: "POST",
                 url: self.voteUrl,
@@ -159,7 +163,12 @@ function PollUtil (runtime, element, pollType) {
             thanks.fadeOut(0).fadeIn('slow', 'swing');
             $('.poll-feedback-container', element).removeClass('poll-hidden');
             if (!can_vote) {
-                $('input', element).attr('disabled', true)
+                // Disable all types of input within the element,
+                // Radio button choices and the submit button.
+                $('input', element).attr('disabled', true);
+            } else {
+                // Enable the submit button.
+                self.enableSubmit();
             }
             return;
         }
@@ -208,6 +217,11 @@ function PollUtil (runtime, element, pollType) {
         });
     };
 
+    this.disableSubmit = function() {
+        // Disable the submit button.
+        self.submit.attr("disabled", true);
+    }
+
     this.enableSubmit = function () {
         // Enable the submit button.
         self.submit.removeAttr("disabled");

setup.py

@@ -44,7 +44,7 @@ def package_data(pkg, roots):
 
 setup(
     name='xblock-poll',
-    version='1.2.6',
+    version='1.2.7',
     description='An XBlock for polling users.',
     packages=[
         'poll',

tests/integration/test_submit_button.py

+# -*- coding: utf-8 -*-
+#
+# Copyright (C) 2015 McKinsey Academy
+#
+# Authors:
+#          Jonathan Piacenti <jonathan@opencraft.com>
+#
+# This software's license gives you freedom; you can copy, convey,
+# propagate, redistribute and/or modify this program under the terms of
+# the GNU Affero General Public License (AGPL) as published by the Free
+# Software Foundation (FSF), either version 3 of the License, or (at your
+# option) any later version of the AGPL published by the FSF.
+#
+# This program is distributed in the hope that it will be useful, but
+# WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+# General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program in a file in the toplevel directory called
+# "AGPLv3".  If not, see <http://www.gnu.org/licenses/>.
+#
+
+from tests.integration.base_test import PollBaseTest
+
+
+class TestSubmitButton(PollBaseTest):
+    def test_submit_button(self):
+        """
+        Goal: We have to make sure that submit button gets disabled right
+        after it is clicked. We cannot test with 100% assurance by adding a
+        method in other tests such as test_functions.py because in that case
+        submit button is anyway disabled after the ajax request.
+
+        We can utilize infinite submission feature and check if the submit
+        button was disabled (because of js) and then re-enabled (because of
+        ajax request).
+        """
+        self.go_to_page('Poll Submit Button')
+        # Find all the radio choices
+        answer_elements = self.browser.find_elements_by_css_selector('label.poll-answer-text')
+        # Select the first choice
+        answer_elements[1].click()
+        # When an answer is selected, make sure submit is enabled.
+        self.wait_until_exists('input[name=poll-submit]:enabled')
+
+        submit_button = self.get_submit()
+        submit_button.click()
+
+        # Make sure that submit button is disabled right away
+        self.assertFalse(submit_button.is_enabled())
+
+        self.wait_until_clickable(self.browser.find_element_by_css_selector('.poll-voting-thanks'))
+        # Wait until the ajax request is finished and submit button is enabled
+        self.assertTrue(self.get_submit().is_enabled())

tests/integration/xml/poll_submit_button.xml

+<poll tally="{'long': 20, 'short': 29, 'not_saying': 15, 'longer' : 35}"
+      question="## How long have you been studying with us?"
+      answers='[["long", {"label": "A very long time", "img": null}], ["short", {"label": "Not very long", "img": null}], ["not_saying", {"label": "I shall not say", "img": null}], ["longer", {"label": "Longer than you", "img": null}]]'
+      feedback="### Thank you&#10;&#10;for being a valued student."
+      private_results="true"
+      max_submissions="0"/>