4

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.

Mike Walker
  • 2,944
  • 8
  • 30
  • 62

1 Answers1

5

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)

Abraham Al-Dabbagh
  • 306
  • 2
  • 4