Question

130

script order for jquery with bootstrap

rated 0 times [ 132] [ 2] / answers: 1 / hits: 35822 / 11 Years ago, tue, june 4, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maximusbradforde

Add To Favorites

Follow

Total Points: 594

Total Questions: 106

Total Answers: 82

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

answered 11 Years ago felixa · Accepted Answer

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.