I'm using the bootstrap-select
I have successfully imported bootstrap-select into my project using:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
within the document <head> tag. I want to see how to modify the checkmarks within the multiple select boxes, and figured I would try to use the
$('.selectpicker').selectpicker('deselectAll');
Method as shown here. Whenever I attempt to use that bit of code, I receive an error:
TS2339: Property 'selectpicker' does not exist on type 'JQuery<HTMLElement>'.
I have even tried installing the types definition using
npm install --save-dev @types/bootstrap-select
But the issue still remains. I'm using the Visual Studio SPA template which uses ASP.NET Core template, Vue.js and Webpack.
I recall dealing with this same error. Trying to reproduce the exact same error now, I found that it only shows up after I follow the steps in this answer: https://stackoverflow.com/a/41168903
My solution, adding this line right below my import statements:
declare var $: any;
For context, this has worked fine for me in an my Angular projects. I'm not too familiar with Vue.js but if it's applicable, I think it's a good idea to wrap all the bootstrap-select jQuery code that you need in one unit (in my case I wrap it all in a directive).
It also works without the need to have any typings installed (I don't have @types/jquery or @types/bootstrap-select)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With