2

I cannot understand why bootstrap color picker is not working. My code is the same as from the example I have used: https:// itsjavi.com/bootstrap-colorpicker/

In the bundle config of my MVC app I have added

"~/Scripts/bootstrap-colorpicker.js",
"~/Scripts/bootstrap-colorpicker.min.js",
"~/css/bootstrap-colorpicker.css",
"~/css/bootstrap-colorpicker.min.css",

The code in the main.aspx

<div class="col-sm-9">
    <div class="input-group demo2">
        <input type="text" value="#00AABB" class="form-control" />
        <span class="input-group-addon"><i></i></span>
    </div>
</div>

And the code in the JS file 

$(function () {
        $('.demo2').colorpicker();
 });

See what hapens

My app screenshot

How it should be screenshot

What I'm doing wrong ?

Georgy Georgiev
  • 21
  • 1
  • 5
  • Did you check your dev tools console for errors? – David R Mar 28 '17 at 06:17
  • As a general matter, you don't need to include both the `.min.js/css` and `.js/css` files - they have the same content. Also, are you certain your `Scripts` directory is actually uppercase? – barry-johnson Mar 28 '17 at 06:17
  • in my opinion, but I can be wrong, you didn't write correctly your self executing function. see http://stackoverflow.com/questions/19491650/self-executing-function-jquery-vs-javascript-difference – Fahrenheit Mar 28 '17 at 06:18
  • @Fahrenheit With the `$` there, I believe this is the jQuery "page ready" function. – barry-johnson Mar 28 '17 at 06:19
  • 1
    Can you try using an ID for the div and call that in your JS? So, try changing `
    ` to `
    ` perhaps and then call `$('.demoID').colorpicker();` ?
     – Gurtej Singh Mar 28 '17 at 06:22
  • I've altered $(function () { $('.demo2').colorpicker(); console.log(20); }); And the "20" is showing in the console. that means there is a problem with the .colorpicker() part? No js errors in the console – Georgy Georgiev Mar 28 '17 at 06:27
  • @barry-johnson I think you are right, didn't remember writing it like this. Georgy Georgiev, I created a fiddle with your case, can't reproduce your problem. Have you more informations to provide us with ? https://jsfiddle.net/rpz9qks1/ – Fahrenheit Mar 28 '17 at 06:32
  • @GurtejSingh It is improbable that in 2017 he has discovered a bug in jQuery's CSS selector functionality. Further, references by ID are prefixed by a `#` not a `.`, so at a minimum he would need to reference it by `$('#demoID')` if following your general suggestion. – barry-johnson Mar 28 '17 at 06:39
  • @barry-johnson Sorry my bad! I meant # and not '.' I was just looking at the source of all the examples on that page, and they seem to use #. Never used this tool before. Was just trying to help! – Gurtej Singh Mar 28 '17 at 06:42
  • Fahrenheit can you tell me what references have you included? I tired with IDs - still the same – Georgy Georgiev Mar 28 '17 at 07:01
  • The problem was missing png files but i had to replace all js and css files and references to figure it out – Georgy Georgiev Mar 28 '17 at 08:22

2 Answers2

0

I had the same issue when using bootstrap-colorpicker@2.5.3 I upgraded to bootstrap-colorpicker@3.2.0 and it fixed the issue Hope it helped...

Roy Rosenberg
  • 111
  • 1
  • 4
0

The call to initialise the colorpicker should be against the input that it is intended to be use on... i.e. I believe your Main.aspx example is incorrect.

<div class="col-sm-9">
    <div class="input-group">
        <input type="text" value="#00AABB" class="form-control demo2" />
        <span class="input-group-addon"><i></i></span>
    </div>
</div>

Notice that the class for .demo2 has been moved to the input for which the picker is intended to manipulate the value of the input box as you use it's controls for picking a color.

Niloc
  • 1
  • 2