How do I debug a twitter bootstrap modal box?

Question

I'm trying to implement the standard modal box using Twitter's bootstrap. I have it working on my plain Apache server, but its not working in a JSP using Tomcat6.

I can't figure out how to approach debugging it. I probably have something mis-copies, but I can't see what.

Here is the applicable code:

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">XXX</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body?</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<script src="/javascript/jquery-1.7.0.min.js" type="text/javascript"></script>
<script src="/javascript/bootstrap-modal.js"></script> 

Note: both jquery and bootstrap are loaded in order.

Answer 1

For the record- when I load bootstrap-modal.js AFTER I load jquery, bootstrap's modal function does not work. When I load bootstrap-modal.js BEFORE I load jquery, bootstrap's modal function works properly.

Answer 2

@keshav had the key, use the javascript console, which showed that my URL for loading jquery was wrong. Fixed that and all is fine. Thanks