Skip to main content
Nancy OShea
Community Expert
Community Expert
October 19, 2015
Question

JS won't run locally

  • October 19, 2015
  • 1 reply
  • 719 views

Ever have one of those days?  I just wasted 3 hours tracking this down.

I had this document open and the JS Tabbed panels would not fire in any browser.  WAMP is my local testing server.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>TEST</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

</head>

<body>

<div class="container">

<div class="row">

<div class="col-md-10">

<!-- Nav tabs -->

<ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#menu1">INTRO</a></li>

    <li><a data-toggle="tab" href="#menu2">DEMO</a></li>

    <li><a data-toggle="tab" href="#menu3">HTML</a></li>

    <li><a data-toggle="tab" href="#menu4">CSS</a></li>

    <li><a data-toggle="tab" href="#menu5">JAVASCRIPT</a></li>

</ul>

<div class="tab-content">

    <div class="tab-pane fade in active" id="menu1">

        <h3>Title:</h3>

        <p>content</p>

    </div>

    <div class="tab-pane fade" id="menu2">

        <h3>Title:</h3>

        <p>content</p>

    </div>

    <div class="tab-pane fade" id="menu3">

        <h3>HTML</h3>

        <pre><code>Code goes here...</code></pre>

        <p> </p>

    </div>

    <div class="tab-pane fade" id="menu4">

        <h3>CSS</h3>

        <pre><code>Code goes here...</code></pre>

        <p> </p>

    </div>

    <div class="tab-pane fade" id="menu5">

        <h3>JavaScript</h3>

        <pre><code>Code goes here...</code></pre>

        <p> </p>

    </div>

    <!--end tabs--></div>

</div>

</div>

</div>

<!--Bootstrap JS-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

</script>

<!--Latest jQuery Core Library-->

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</body>

</html>

Good grief!  It turns out jQuery must load first otherwise Bootstrap doesn't load.

<!--Latest jQuery Core Library-->

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!--Bootstrap JS-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

</script>

Go figure... 

Nancy O.

This topic has been closed for replies.

1 reply

October 19, 2015

If you missed the comment that said "<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->" in the basic template code example on http://getbootstrap.com/getting-started/#template then the first line of bootstrap.js should of tipped you off:

if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");

best,

Shocker

Nancy OShea
Community Expert
Community Expert
October 19, 2015

But I had jQuery in the document. However, it came AFTER Bootstrap.js

Evidently, stacking order is crucial.  JQ must load first.

Lesson learned.

Nancy O.

Nancy O'Shea— Product User & Community Expert