Merge pull request #27 from ravi-ojha/educator_273

Disable submit button on button click to avoid multiple ajax calls

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"/>