CODEWITHSUNDEEP
jqueryhtmlcssasp.nettwitter-bootstrap
Hack4Life
Hack4Life

Reputation: 563

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

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">
              <i></i>
         </div>
     </div>
     <!-- /.input group -->
</div>

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: log from chrome

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]-->

Thanks for any help.

Upvotes: 1

Views: 4517

Answers (2)

Hack4Life
Hack4Life

Reputation: 563

The bootstrap-colorpicker.js need to be under the jQuery inclusion.

After doing this everything works fine.

Upvotes: 1

Sorav Garg
Sorav Garg

Reputation: 1067

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.

Upvotes: 1

Related Questions