From ae0d48057e7527640209aae0d60e484aa7552014 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Sun, 8 Dec 2013 17:42:59 -0800
Subject: [PATCH] fix #11787: document stateful button JS

---
 docs-assets/js/application.js |  2 +-
 javascript.html               | 24 +++++++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/docs-assets/js/application.js b/docs-assets/js/application.js
index ace8bddfcb..3fd599eb7b 100644
--- a/docs-assets/js/application.js
+++ b/docs-assets/js/application.js
@@ -90,7 +90,7 @@
       .popover()
 
     // button state demo
-    $('#fat-btn')
+    $('#loading-example-btn')
       .click(function () {
         var btn = $(this)
         btn.button('loading')
diff --git a/javascript.html b/javascript.html
index 2ebb503e2d..39dbc6e8e9 100644
--- a/javascript.html
+++ b/javascript.html
@@ -1334,14 +1334,23 @@ $('#my-alert').bind('closed.bs.alert', function () {
     <h4>Stateful</h4>
     <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
     <div class="bs-example" style="padding-bottom: 24px;">
-      <button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
+      <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
         Loading state
       </button>
     </div><!-- /example -->
 {% highlight html %}
-<button type="button" data-loading-text="Loading..." class="btn btn-primary">
+<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
   Loading state
 </button>
+<script>
+  $('#loading-example-btn').click(function () {
+    var btn = $(this);
+    btn.button('loading');
+    $.ajax(...).always(function () {
+      btn.button('reset');
+    });
+  });
+</script>
 {% endhighlight %}
 
     <h4>Single toggle</h4>
@@ -1440,7 +1449,16 @@ $('.btn').button()
     <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
     </p>
 {% highlight html %}
-<button type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
+<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
+<script>
+  $('#loading-example-btn').click(function () {
+    var btn = $(this);
+    btn.button('loading');
+    $.ajax(...).always(function () {
+      btn.button('reset');
+    });
+  });
+</script>
 {% endhighlight %}
 
     <div class="bs-callout bs-callout-danger">