Preserve tab preference in cookies.

rest_framework/static/rest_framework/js/default.js

+function getCookie(c_name)
+{
+    // From http://www.w3schools.com/js/js_cookies.asp
+    var c_value = document.cookie;
+    var c_start = c_value.indexOf(" " + c_name + "=");
+    if (c_start == -1) {
+        c_start = c_value.indexOf(c_name + "=");
+    }
+    if (c_start == -1) {
+        c_value = null;
+    } else {
+        c_start = c_value.indexOf("=", c_start) + 1;
+        var c_end = c_value.indexOf(";", c_start);
+        if (c_end == -1) {
+            c_end = c_value.length;
+        }
+        c_value = unescape(c_value.substring(c_start,c_end));
+    }
+    return c_value;
+}
+
+// JSON highlighting.
 prettyPrint();
 
+// Bootstrap tooltips.
 $('.js-tooltip').tooltip({
     delay: 1000
 });
 
+// Deal with rounded tab styling after tab clicks.
 $('a[data-toggle="tab"]:first').on('shown', function (e) {
     $(e.target).parents('.tabbable').addClass('first-tab-active');
 });
 $('a[data-toggle="tab"]:not(:first)').on('shown', function (e) {
     $(e.target).parents('.tabbable').removeClass('first-tab-active');
 });
-$('.form-switcher a:first').tab('show');
+
+$('a[data-toggle="tab"]').click(function(){
+    document.cookie="tab=" + this.name;
+});
+
+// Store tab preference in cookies & display appropriate tab on load.
+var selectedTab = null;
+var selectedTabName = getCookie('tab');
+
+if (selectedTabName) {
+    selectedTab = $('.form-switcher a[name=' + selectedTabName + ']');
+}
+
+if (selectedTab && selectedTab.length > 0) {
+    // Display whichever tab is selected.
+    selectedTab.tab('show');
+} else {
+    // If no tab selected, display rightmost tab.
+    $('.form-switcher a:first').tab('show');
+}

rest_framework/templates/rest_framework/base.html

@@ -128,8 +128,8 @@
                 <div {% if post_form %}class="tabbable"{% endif %}>
                     {% if post_form %}
                     <ul class="nav nav-tabs form-switcher">
-                        <li><a href="#object-form" data-toggle="tab">HTML form</a></li>
-                        <li><a href="#generic-content-form" data-toggle="tab">Raw data</a></li>
+                        <li><a name='html-tab' href="#object-form" data-toggle="tab">HTML form</a></li>
+                        <li><a name='raw-tab' href="#generic-content-form" data-toggle="tab">Raw data</a></li>
                     </ul>
                     {% endif %}
                     <div class="well tab-content">