fixes bug 896562 - API documentation javascript is too impatient

mozilla-services · Jul 22, 2013 · 4384e43 · 4384e43
1 parent fb697e8
commit 4384e43
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/webapp-django/crashstats/api/static/api/js/testdrive.js b/webapp-django/crashstats/api/static/api/js/testdrive.js
@@ -1,6 +1,8 @@
 (function ($, document) {
     'use strict';
 
+    var _submission_locked = false;
+
     $.fn.serializeExclusive = function() {
         var o = {};
         var a = this.serializeArray();
@@ -54,7 +56,7 @@
             var value = element.val();
             if (element.hasClass('required') && !value) {
                 valid = false;
-            } else if (element.hasClass('validate-int') && !is_int(value)) {
+            } else if (element.hasClass('required') && element.hasClass('validate-int') && !is_int(value)) {
                 valid = false;
             } else {
                 // we can do more validation but let's not go too crazy yet
@@ -84,6 +86,8 @@
         if (ajax_url.search(/\?/) == -1) ajax_url += '?';
         else ajax_url += '&';
         ajax_url += 'pretty=print';
+        $('img.loading-ajax', form).show();
+        $('button.close', form).hide();
 
         $.ajax({
            url: ajax_url,
@@ -97,16 +101,27 @@
                $('.status code', container).hide();
                $('.status-error', container).hide();
                container.show();
-               $('button.close', form).show();
+               setTimeout(function() {
+                   // add a slight delay so it feels smoother for endpoints
+                   // that complete in milliseconds
+                   $('img.loading-ajax', form).hide();
+                   $('button.close', form).show();
+               }, 500);
+               _submission_locked = false;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                var container = $('.test-drive', form);
                $('pre', container).text(jqXHR.responseText);
                $('.status code', container).text(jqXHR.status).show();
                $('.status-error', container).show();
-
                container.show();
-               $('button.close', form).show();
+               setTimeout(function() {
+                   // add a slight delay so it feels smoother for endpoints
+                   // that complete in milliseconds
+                   $('img.loading-ajax', form).hide();
+                   $('button.close', form).show();
+               }, 500);
+               _submission_locked = false;
            }
         });
     }
@@ -135,9 +150,15 @@
         $('form.testdrive').submit(function(event) {
             var $form = $(this);
             event.preventDefault();
-            if (validate_form($form)) {
-                submit_form($form);
+            if (_submission_locked) {
+                alert('Currently processing an existing query. Please be patient.');
             } else {
+                _submission_locked = true;
+                if (validate_form($form)) {
+                    submit_form($form);
+                } else {
+                    _submission_locked = false;
+                }
             }
         });
 

diff --git a/webapp-django/crashstats/api/templates/api/documentation.html b/webapp-django/crashstats/api/templates/api/documentation.html
@@ -17,6 +17,7 @@
   button.close { display: none; }
   .status-error { display: none; color: red; font-weight: bold; }
   pre.docstring { background-color: rgb(225,225,225); padding: 6px; }
+  img.loading-ajax { display: none; }
   </style>
 {% endblock %}
 
@@ -105,6 +106,7 @@ <h2>{{ endpoint.name }}</h2>
           <!-- for starting a test drive -->
           <div class="run-test">
           <button type="submit">Run Test Drive!</button>
+          <img src="{{ static('img/ajax-loader16x16.gif') }}" alt="Loading..." class="loading-ajax">
           <button type="button" class="close">&times; Close</button>
           </div>