CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
TomSelleck
TomSelleck

Reputation: 6968

Progress bar not appearing bootstrap

I'm following this tutorial for displaying a progress bar.

test.js

var waitBar;
waitBar = waitBar || (function () {
    var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
    return {
        showPleaseWait: function () {
            pleaseWaitDiv.modal();
        },
        hidePleaseWait: function () {
            pleaseWaitDiv.modal('hide');
        },
    };
})();

page.html

@{
    Layout = null;
}

<button type="submit" class="button btn-primary radius pull-right" onclick="waitBar.showPleaseWait()">Submit</button>

<script src="~/Scripts/test.js" type="text/javascript"></script>

When I click the submit button, the page darkens but the progress bar modal isn't displayed. Anybody have any ideas??

Upvotes: 2

Views: 2400

Answers (1)

ckuijjer
ckuijjer

Reputation: 13814

I would move the html of the modal dialog into the html document instead of it being defined in JavaScript. I've reimplemented the modal dialog as some of the html of the tutorial feels fishy.

function show() {
  $('#pleaseWaitDialog').modal();
  
  // just for the example hide the modal after 5 seconds
  window.setTimeout(close, 5000);
}

function close() {
  $('#pleaseWaitDialog').modal('hide');
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button id="btn" class="btn btn-primary" onclick="show();">Submit</button>

<div id="pleaseWaitDialog" class="modal" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Processing...</h1>
      </div>
      <div class="modal-body">
        <div class="progress progress-striped active">
          <div class="progress-bar" style="width: 100%;"></div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Upvotes: 2

Related Questions