script order for jquery with bootstrap

Question

I'm new to jquery and bootstrap, and I can't get them to play nicely with each other. I have a page with both bootstrap dropdowns and jquery sliders. However, I can't get both of them to work at the same time.

Bootstrap dropdowns work with this file, and sliders break

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/js/slider_input.js"></script>
</head>

<body>
....
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body
</html

By removing the second to last line like so:

Sliders work, and bootstrap dropdowns break

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/js/slider_input.js"></script>
</head>

<body>
....

    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body
</html

score 14 · Accepted Answer · answered Jun 04 '13 at 20:28

oh yeah now i see sorry. You have to load your actual jquery first, else UI won't work either. So this should be the head

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<script src="/js/slider_input.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

Also in html5 you need to leave off the 'type="text/javascript"', like the bootstrap one, also be consisten, so if you have it on the other, also add it to the bootstrap, it has to do with loading rules.

score 1 · Answer 2 · edited Feb 16 '16 at 00:50

1

Not sure, but it seems like your Bootstrap version requires a newer version of jQuery to run properly, try to replace:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

with

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

and then leaving it off in your body.

Let me know what happens then.

Note: Don't ever load two jQuerys, they will break and stop the working of your functions, and especially when you use ajax on your page.

edited Feb 16 '16 at 00:50

fusion3k

11,568
4
25
47

answered Jun 04 '13 at 19:43

Tobias Hagenbeek

1,212
3
15
30

One of those is for jqueryui and one is from jquery, don't I need both? – bcoop713 Jun 04 '13 at 19:45
Tried it anyway and it's still broken :( – bcoop713 Jun 04 '13 at 19:49
oh yeah now i see sorry. You have to load your actual jquery first, else UI won't work either. So this should be the head – Tobias Hagenbeek Jun 04 '13 at 20:24

Tyson Gibby · Answer 3 · 2019-11-18T18:50:23.857

1

"jQuery must come first, then Popper.js, and then our [bootstrap] JavaScript plugins." Bootstrap 4.x javascript script order: getbootstrap.com

edited Nov 18 '19 at 18:50

answered Nov 18 '19 at 16:01

Tyson Gibby

2,590
2
18
37

script order for jquery with bootstrap

3 Answers3

Linked