Merge branch 'master' of github.com:tourdedave/the-internet into rele…

…ase/0.39.0

server.rb

@@ -245,6 +245,10 @@ def authorized?
   redirect "/login"
 end
 
+get '/dynamic_controls' do
+  erb :dynamic_controls
+end
+
 get '/dynamic_loading' do
   erb :dynamic_loading
 end

views/dynamic_controls.erb

@@ -0,0 +1,60 @@
+<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
+<script>
+function onClick (){
+   disableButton();
+   clearMessage();
+   showDelay();
+   pauseThenToggleControls();
+};
+
+function disableButton() {
+   $('#btn').attr("disabled",true);
+};
+
+function clearMessage() {
+    if ($('#message').length) {
+       $('#message').first().remove();
+    }
+};
+
+function showDelay() {
+   $('#btn').after("<div id='loading'>Wait for it... <img src='/img/ajax-loader.gif'></div></br>");
+};
+
+function pauseThenToggleControls() {
+   setTimeout(function() {
+	toggleControls();
+   } , 3000 );
+};
+
+function toggleControls() {
+  var btn = $('#btn').first();
+  var check = $('#checkbox').first();
+  var load = $('#loading');
+  if ( btn.text() == "Remove") {
+       check.remove();
+       btn.text("Add");
+       btn.after("<p id='message'>It's gone!</p>");
+       btn.attr("disabled", false);
+       load.hide();
+  }else{
+       btn.text("Remove");
+       btn.after("<div id='checkbox'><input type='checkbox' id='checkbox'> A checkbox </div>");
+       btn.after("<p id='message'>It's back!</p>");
+       btn.attr("disabled", false);
+       load.hide();
+    }
+ };
+</script>
+<div class="example">
+   <h4>Dynamic Controls</h4>
+   <p>This example demonstrates when controls (e.g., checkbox, option button, etc.) are added or removed asynchronously.</p>
+
+   <form >
+       <button autocomplete="off" type="button" id="btn" onclick="onClick()" >Remove</button>
+       <div id="checkbox">
+	  <input type="checkbox" id="checkbox" > A checkbox
+       </div>
+
+   </form>
+<div>

views/examples.erb

@@ -9,6 +9,7 @@
   <li><a href='/drag_and_drop'>Drag and Drop</a></li>
   <li><a href='/dropdown'>Dropdown</a></li>
   <li><a href='/dynamic_content'>Dynamic Content</a></li>
+  <li><a href='/dynamic_controls'>Dynamic Controls</a></li>
   <li><a href='/dynamic_loading'>Dynamic Loading</a></li>
   <li><a href='/download'>File Download</a></li>
   <li><a href='/upload'>File Upload</a></li>