Bootstrap multiselect: TypeError: $ (...). multiselect is not a function
I want to use a plugin to select multiple downloads: Bootstrap Multiselect
but it doesn't work for me.
<script type="text/javascript" src="dist2/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="dist2/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function(){
$('#doc_1').multiselect();
});
</script>
source to share
before your plugin you need to have jquery library and bootstrap library:
<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Include the plugin CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
Note:
You should always put your css before any script.
Get the link here
source to share
I ran into the same problem today while writing a sample to test Bootstrap multitasking even after referencing the files in the correct order in my .cshtml.
It turned out that I was referencing the jquery library twice and as soon as I fixed that it started working fine. Sometimes, using the Chrome dev tools, you cannot see that the library is being loaded twice, however, if you right click on the page and in the View window, you will see that it is duplicated.
source to share
Include the following JQuery and Bootstrap files in index.html.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
source to share
To add to Indi's answer, I ran into the same issue where I had two links to jquery and hence the list box was dropped instead of multiselect. This was because my page inherited from a layout page that had its own jquery link. So make sure you have a link in Shared / _Layout.cshtml or in your page where you are doing the dropdown.
source to share