Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am using bootstrap colorpicker but my requirement is to change the default onload color differently on change of select drop down list.

I am using the below constructor :-

$('#colorPicker').colorpicker();
This is the code in jsp.
<div id='colorPicker'>
 <input type='text' value='#ea0437' class='form-control'/>
 <span class='input-group-addon'></span>
I am getting the color code from database so I can't add the initial color code as given above in the following line :
<input type='text' value='#ea0437' class='form-control'/>
How can I provide this color in constructor ?
The documentation says that there is a color option, but no demonstration given. How can I provide the color initially ?  Something like this :
$('#colorPicker').colorpicker({
color : '#ea0437'
Any suggestion? Thanks in advance. 
                Why don't you use the color input type? like this : <input type="color" name="favcolor" value="#ea0437">
– BahaEddine Ayadi
                Jul 29, 2015 at 11:13
                @sjm Yes I used the color property as given in the question. Its not working. No error on console. It simply neglects the color and loads the colorpicker component to default blank state with a invisible box (Transparent no color). On click of that I get the colorpicker widget opened and then can select the color. But the requirement to load colorpicker with initial color is not fullfilled.  Kindly suggest.
– New Bee
                Jul 29, 2015 at 11:26
I got mine to work after days of trying it out. It appears an onchange event has been attached to the colorpicker input field, but doesn't get fired, after setting the value through script. Hence u have to fire it manually, like this : 
$("#inputcolor").val("#bbccff");
$("#inputcolor").trigger('change');
Use both of these together. It will work
$('#inputcolor').colorpicker({color : "Your_color"})
$('#inputcolor').colorpicker('setValue', "Your_color")
It worked for me with this code :
$('#colorPicker').colorpicker(document.getElementById('inputcolor'),'#ea0437');
I just gave the input the id of "inputcolor" and then get it with getElementById.
EDIT:
How about assigning a value to the input when the document loads completely,and then the colorpicker pick it, so it'll be like a default color.
Here's the new code :
$(document).ready(function(){
    $('#inputcolor').val('#ccc');
    $('#colorPicker').colorpicker();
There's so much issues with this library, you can have a look at the issues in their github .
Here's the new Fiddle
                Thanks for the effort ayadi but the fiddle is not working as expected. You provided the same color code '#ea0437'  in  <input id='inputcolor' type='text' value='#ea0437' class='form-control'/> and in colorpicker constructor. I tried to change the color and then run and it failed.
– New Bee
                Jul 29, 2015 at 11:44
                Thanks alot ayadi baha. Yes it worked now. I was trying the same as you did " $('#inputcolor').val('#832ed9');"  but I was doing this via java script not jquery. Don't know why it was not working. Yesterday I resolved it by doing some modifications in bootstrap colorpicker js file. You resolved it in a very easy way without touching the source js file of colorpicker. Thanks alot for your help :)
– New Bee
                Jul 30, 2015 at 7:24
        
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.