jquery - Bootstrap-Colorpicker: Cannot set property 'colorpicker' of undefined

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I want to display an color picker in a form. I'm using bootstrap-colorpicker and have build my colorpicker (ok, I have copied it from the advanced forms page from the Admin LTE 2 demo ):
<!-- Color Picker -->
<div class="form-group">
     <label>Color picker with addon:</label>
     <div class="input-group colorpicker-critically">
         <input type="text" class="form-control" />
         <div class="input-group-addon">
     <!-- /.input group -->
I initialise the plugin:
 $(document).ready(function () {
    //color picker with addon
    $(".colorpicker-critically").colorpicker();
And i link the .js before the .css in my <head> tag. jQuery is of course also included.
When I try the page I get the following errors:
Here is my <head> Tag:
<head><title></title>
<!-- bootstrap color picker -->
<script src="/plugins/colorpicker/bootstrap-colorpicker.min.js" type="text/javascript"></script>
<!-- Bootstrap Color Picker -->
<link href="/plugins/colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- Ion Slider -->
<link href="/plugins/ionslider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
<!-- ion slider Nice -->
<link href="/plugins/ionslider/ion.rangeSlider.skinNice.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/ion.rangeSlider.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinFlat.css"/>
    <link rel="stylesheet" href="/plugins/ionslider//ion.rangeSlider.skinHTML5.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinModern.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinNice.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/ion.rangeSlider.skinSimple.css"/>
    <link rel="stylesheet" href="/plugins/ionslider/normalize.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<!-- Bootstrap 3.3.4 -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="../plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="../plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="../plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="../plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
                Can you provide your <head> HTML part please ? As Bootstrap uses JQuery in its components it may require to put the JQuery before anything.
– Anwar
                Aug 3, 2015 at 10:35
Your color picker library is conflicting that`s why your color picker function is not defined i have a another way to use color picker you can use directly 
<input type="color" class="form-control" />
It will add color picker you don`t need to add a color picker library.
                Yeah this works but it looks ... yeah terrible. Is there a way that I can use the bootstrap-colorpicker plugin anyway?
– Hack4Life
                Aug 3, 2015 at 11:33
                you can use this --  bootstrapformhelpers.com/colorpicker    or  mjolnic.com/bootstrap-colorpicker
– Sorav Garg
                Aug 3, 2015 at 11:37
                you have to use both js and css color picker library in bottom you can`t define on top..please try this ..
– Sorav Garg
                Aug 3, 2015 at 11:40
                I have tried it and I still get this error: Uncaught TypeError: $(...).colorpicker is not a function,  I'm using the second plugin you have linked (please take a look at my very first post).
– Hack4Life
                Aug 3, 2015 at 11:58
                Strange. I have copied the same code but in jsfiddle everything works... jsfiddle.net/9wpt2xdj
– Hack4Life
                Aug 3, 2015 at 12:19
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.