Geek Answers Handbook

Script order for jquery with bootstrap

I am new to jquery and bootstrap and I cannot get them to play beautifully with each other. I have a bootstrap dropdown page and jquery sliders. However, I cannot get both to work at the same time.

Bootstrap popup windows 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

Removing the second to the last line as follows:

Slider operation and bootstrap popup windows

 <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
+7
source share
2 answers

Oh yes, now I see sorry. First you need to load your actual jquery, otherwise the user interface will not work. So it 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 the text "type =" text / javascript "", like bootstrap, and be ready, so if you have this on another, add it to bootstrap, it should do the loading rules.

+7
source

Not sure, but it looks like your version of Bootstrap requires a newer version of jQuery to run, try replacing:

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

from

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

and then leaving it in your body.

Let me know what happens next.

Note. . Never download two jQuery, they will interrupt and stop your functions, especially when you use ajax on your page.

+1
source

More articles:


All Articles