Bootstrap-select: Cannot read property 'valHooks' of undefined

Created on 26 Dec 2016 · 8Comments · Source: snapappointments/bootstrap-select

Hello,

I installed the plugin throw npm and added the html tags to the header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

However I get the error:

Uncaught TypeError: Cannot read property 'valHooks' of undefined
    at bootstrap-select.min.js:7
    at bootstrap-select.min.js:8
    at bootstrap-select.min.js:7
    at bootstrap-select.min.js:7

does anybody know about this?

Regards.

Source

leonelpena

Most helpful comment

What version of jQuery are you using? You need to load jQuery _before_ bootstrap-select.min.js.

caseyjhol on 30 Dec 2016

👍26

All 8 comments

I'm having the same issue.

the-codetrane on 28 Dec 2016

What version of jQuery are you using? You need to load jQuery _before_ bootstrap-select.min.js.

caseyjhol on 30 Dec 2016

👍26

I was able to resolve this be removing turbolinks. Thanks for your help!

the-codetrane on 7 Jan 2017

I have the same question,I can't think how you solved the problem.

stajason on 23 Oct 2017

@caseyjhol is right, even if rails-assets.org says something different.

This order works for a Rails 4.2.5 app (w/ Turbolinks)

# app/assets/javascripts/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-select
//= require turbolinks
//= require bootstrap

hotsen on 2 Dec 2017

👍1

I am using this library in React, and I have the same problem of valHooks and options are not styled as shown in docs, How to solve for React now?
as mentioned in https://github.com/snapappointments/bootstrap-select/issues/1875, how to add bootstrap-select.js, it's already added in node_modules when installed!

denishrana09 on 2 May 2019

I am having the same issue in prod, but my test is fine. They are both hosted on the same server. The only difference I can think of is that Prod has cloudflare enabled.

Im using php, with no real framework. I tried switching from the min version to an uncompressed version. I will update here if I find a solution.

Update:
I had two references to the js. Once I removed one I was fine.

thorst on 9 Sep 2019

I have solve the issue on my side by adding defer into the script.

<link defer rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

I hope this helps you all to solve the issue!