• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

JS won't run locally

Community Expert ,
Oct 19, 2015 Oct 19, 2015

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Views

610

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Oct 19, 2015 Oct 19, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 19, 2015 Oct 19, 2015

Copy link to clipboard

Copied

LATEST

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 & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines