Clever Geek Handbook

Javascript events not loading

None of the bootstrap javascript events (in this case the ones for collapse / expand) will bind to my elements. I'm new to bootstrap so maybe there is a problem somewhere ????

When pasted into bootply, it works fine http://www.bootply.com/tMvXXUvlz6

a limited release live example of a broken version is also available here http://quirell.ngrok.io/tagged/life#

head.html:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">

body.html:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#navbar" class="navbar-toggle collapsed"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button><a href="#" class="navbar-brand">Lynn Cyrin</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Me</a></li>
        <li><a href="/contact">Contact</a></li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="dropdown-toggle">Dropdown<span class="caret"></span></a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="/tagged/life">Life</a></li>
            <li><a href="/tagged/advocacy">Advocacy</a></li>
            <li><a href="/tagged/tech">Tech</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

footer.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

edits:

Nothing is displayed on the console showing any error message. I just noticed that there is a line at the top of bootstrap which is throwing an error as there is no jQuery and I cannot get this line to run (by removing jQuery).

I had a feeling that all the js are broken, so I did console.log('pizza')

right under the bootstrap.js call and it worked fine. It's as if my page has never applied bootstrap.js content ??????

+3


source to share


2 answers


You must have src

for both tags <script>

. You have href

on Bootstrap.



Also, it might need to be disabled https

and just used //<url here>

to make it work with whatever protocol you request on the site.

0


source


Add your Jquery link below bootstrap. because in your case the browser first loads jQuery and then tries to load the boot file which creates a conflict



0


source






More articles:


All Articles