How to call on 'changeColor' method of bootstrap colorpicker?

Question

I used bootstrap colorpicker by adding bootstrap-colorpicker.css and js as given below :-

<div class="demo-auto">
<input type="text" value="#ea0437"class="form-control" hidded='hidden' id="irColorCode"/>
<span class="input-group-addon"><i></i></span>
</div>

I made the text box hidded by giving it a id. Now my requirement is to fire a method everytime the color is changed by the user. The text box is hidded so I can't use onchange method for the same.

I am using .watch method but it gives oldValue as "undefined".

document.getElementById('irColorCode').watch('value',
        function(id, oldval, newval) {
            console.log(id+ " " + oldval +" " + newval);
        });

Is there any other way to do this or resolve this ? There is a method available to do action on color change :-

$('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
  bodyStyle.backgroundColor = event.color.toHex();
});

But I am not using this constructor anywhere. Kindly suggest how to use this?

Answer 1

I sorted it out myself. Wrote the above given method in docs.js as below :

$('#myColorPicker').colorpicker().on('changeColor',
            function(ev) {
                changeTableColor('myColorCode');
            });

I am not calling this constructor manually but its there in docs.js hardcoded with the id $('#myColorPicker'). Silly but that was the issue, So I duplicated the code here with my id and called my method on 'changecolor' event.

Thanks :)

Answer 2

A color picker input with a color box:

<div>
   <input type="text" class="color-picker-input" >
   <span class="color"></span>
</div>   

And later in your js:

$('.color-picker-input').colorpicker().on('changeColor', function() {
      $(this).parent().find('.color').css("background-color", $(this).colorpicker('getValue', '#ffffff') );
});