JSFiddle - React, Tailwind, and code Playground

by mark47

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h2>Skipped Questions</h2>
<p>You do not have any skipped questions. If you're satisfied with your answers, touch or click 'Next' below. After doing so, you won't be able to change any of your answers.</p>
<div id='survey-bottom-bar' class='section survey'><div id='survey-bottom-center'><a href="http://www.google.com" class="btn" style="margin: 6px 6px 0 0; float: left" id="prev-arrow-link" title="Previous Page"><i class="icon-chevron-left"></i> Previous</a>  
               
    <a href="http://www.uw.edu" class="btn btn-primary btn-large calcInit" style="margin: 1px 0 0 6px; float: left" id="next-arrow-link" title="Complete Questions">Next <i class="icon-chevron-right icon-white"></i> </a>
    
<div id="calculating-box"  class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Calculating Your Answers</h3>
  </div>
  <div class="modal-body">
    <p>One moment please while the the system saves your answers.</p>
    <p><img src="/mazzone/img/loading.gif" alt="Saving" style="vertical-align: middle" /></p>
  </div>
</div>

JavaScript

// THIS IS TO PREVENT MULTIPLE COMPLETE REQUESTS
var calculatingSession = false;

$(function() {

    $(".calcInit").click(function() {
            var toLoad = $(this).attr('href');
            if (calculatingSession === true) {
                return false;
            }
            calculatingSession = true;
            $("#calculating-box").modal({
                    backdrop: 'static',
                keyboard: false
            });
            setTimeout(function() {
                window.location = toLoad
            }, 4000);
            return false;
        });

}); // onload