2756: Fix "duplicate tab" behavior in Chrome.

[arvados.git] / apps / workbench / app / assets / javascripts / collections.js

diff --git a/apps/workbench/app/assets/javascripts/collections.js b/apps/workbench/app/assets/javascripts/collections.js
index 806ee6dc99da341fc9f80f4bdba5ae43e3703a30..7f4b510316d8a4b8d3b1b8bccff2fdceb34866a6 100644 (file)
--- a/apps/workbench/app/assets/javascripts/collections.js
+++ b/apps/workbench/app/assets/javascripts/collections.js
@@ -1,47 +1,53 @@
 jQuery(function($){
-    $(document).on('change', '.toggle-persist input[name=wants]', function() {
+    $(document).on('click', '.toggle-persist button', function() {
         var toggle_group = $(this).parents('[data-remote-href]').first();
-        if (toggle_group.attr('data-persistent-state') == $(this).val()) {
-            // When the user clicks the already-selected choice, or
-            // the fail() handler below reverts state to the existing
-            // state, don't start an AJAX request.
-            return;
-        }
+        var want_persist = !toggle_group.find('button').hasClass('active');
+        var want_state = want_persist ? 'persistent' : 'cache';
+        console.log(want_persist);
+        toggle_group.find('button').
+            toggleClass('active', want_persist).
+            html(want_persist ? 'Persistent' : 'Cache');
         $.ajax(toggle_group.attr('data-remote-href'),
                {dataType: 'json',
                 type: 'POST',
                 data: {
-                    value: $(this).val()
+                    value: want_state
                 },
                 context: {
                     toggle_group: toggle_group,
-                    input: this
+                    want_state: want_state,
+                    button: this
                 }
                }).
             done(function(data, status, jqxhr) {
                 var context = this;
                 $(document).trigger('ajax:complete');
                 // Remove "danger" status in case a previous action failed
-                $('label.btn-danger', context.toggle_group).
+                $('.btn-danger', context.toggle_group).
                     addClass('btn-info').
                     removeClass('btn-danger');
                 // Update last-saved-state
                 context.toggle_group.
-                    attr('data-persistent-state', $(context.input).val());
+                    attr('data-persistent-state', context.want_state);
             }).
             fail(function(jqxhr, status, error) {
                 var context = this;
+                var saved_state;
                 $(document).trigger('ajax:complete');
                 // Add a visual indication that something failed
-                $('label.btn', context.toggle_group).
+                $(context.button).
                     addClass('btn-danger').
                     removeClass('btn-info');
-                // Select the button reflecting the last-saved-state
-                $('label.btn input[value=' +
-                  context.toggle_group.attr('data-persistent-state') +
-                  ']', context.toggle_group).
-                    button('toggle');
-                if (jqxhr.responseJSON && jqxhr.responseJSON.errors) {
+                // Change to the last-saved-state
+                saved_state = context.toggle_group.attr('data-persistent-state');
+                $(context.button).
+                    toggleClass('active', saved_state == 'persistent').
+                    html(saved_state == 'persistent' ? 'Persistent' : 'Cache');
+
+                if (jqxhr.readyState == 0 || jqxhr.status == 0) {
+                    // Request cancelled due to page reload.
+                    // Displaying an alert would be rather annoying.
+                } else if (jqxhr.responseJSON && jqxhr.responseJSON.errors) {
                     window.alert("Request failed: " +
                                  jqxhr.responseJSON.errors.join("; "));
                 } else {