1

I'm working on an app where I use both Bootstrap 4 and JQueryUI (namely, the draggable & droppable features).

Thus far it's worked fine, but now when I'm trying to use Bootstrap and JQuery to display modals, like so:

$("#modal1").modal({});

I get a console error saying $(...).modal is not a function. So I figured my JQuery loading script is in the wrong place, but moving it around, such as before the Bootstrap css and scripts, results in a bunch of errors of this sort:

Uncaught TypeError: $(...).draggable is not a function

and draggable is a JQueryUI function.

Does my head tag look alright or what's up? Why doesn't Bootstrap want to co-operate with me?

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Ubuntu:700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Let me know if I need to provide any more details. Thanks!

ariaofsorrow
  • 41
  • 1
  • 2
  • 14
  • Related: http://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery – freedomn-m May 17 '17 at 12:59
  • So bootstrap4 targets 3.1 slim, so they're in the correct order, but then you also load jquery 1.12 – freedomn-m May 17 '17 at 13:01
  • Taking out jquery 1.12 results in draggable not functioning anymore, though? Seems like jquery-ui needs the 1.12 load script there in order to function. – ariaofsorrow May 17 '17 at 13:02
  • According to [this page](https://api.jqueryui.com/1.12/) *jQuery UI 1.12 supports jQuery 1.7 and newer.* so try changing jquery-3.1.1.slim to jquery-3.1.1.min.js (full) and remove the old jquery 1.12.4. The version numbers of jquery and jquery-ui have no relation to each other. – freedomn-m May 17 '17 at 13:09

1 Answers1

1

you are loading jquery twice remove this :-

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
A Biswas
  • 421
  • 6
  • 12
  • 1
    Try replacing the slim version of jquery at top with jquery 3.2.1 i.e replace slim line with `` – A Biswas May 17 '17 at 13:07
  • That worked, thank you so much! However, is it a problem that I'm loading jquery twice regardless? Jquery-ui seems to stop working whenever I remove the older jquery load script. Now, though, when I replaced the 3.1.1. slim Jquery with 3.2.1 min, it works flawlessly. – ariaofsorrow May 17 '17 at 13:11
  • *slim* version does not include everything that jquery-ui needs, because, well... it's a slim version – freedomn-m May 17 '17 at 13:13