Danielle Rose Mabunga Danielle Rose Mabunga - 3 months ago 20
HTML Question

Bootstrap: Proper way of linking JavaScript files in HTML layout

I am still new to web development, and I admit I am not good at designing, so I relied heavily on Bootstrap's nice CSS for styling tables, dropdowns ,etc., .How do you link your Bootstrap files in main layout?So far Bootstrap works nicely in my newly created site, but I have one problem, Google's developer's console tells that I have error in my layout.html


Uncaught Error: Bootstrap's JavaScript requires jQuery


This is how I linked Bootstrap css/js in my layout,

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>


So I tried this way

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


Now the error is gone.The styling in table, pager still works, but Bootstrap's dropdown in navbar no longer works.How do you fix this?

<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="{{ path('voters_register') }}">
Register Here
</a>
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="{{path('homepage')}}">Home</a></li>
<li><a href="{{ path('about') }}">About</a></li>
<li><a href="{{path('contact')}}">Contact</a></li>
<li class="dropdown">//the problem is here
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stats<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{path('voters_groups')}}">Supporter's Groups</a></li>
<li><a href="{{path('voters_island')}}">Statistics</a></li>
<li><a href="{{path('search_city')}}">Search</a></li>
<li><a href="{{path('voter_graph')}}">Graphs</a></li>
<li><a href="{{path('voters_list')}}">Lists of Supporters</a></li>
<li><a href="{{path('voters_messages')}}">Supporter's Messages</a></li>
<li><a href="{{path('voters_register')}}">Register Here</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<.........other markups....>

ian ian
Answer

I also had that problem before, changing your configuration like this

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Will resolve the problem. I don't know why the link from JQuery.com

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Will cause an error in developer's console but, still work anyway.Hoep it helps