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 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>
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?
                hidded='hidden' sounds unfamilair to me. Perhaps hidden with nothing more than that? it shouldn't even need a value (due to the fact that it is a boolean, hence if defined true, else false), like checked and so on. Besides, can you please create a fiddle to work on in order to replicate the problem?
– briosheje
                Jul 6, 2015 at 7:47
                @briosheje thanks for your reply :) . I just sorted it out. Approach is mentioned in below comment. Thanks
– New Bee
                Jul 7, 2015 at 10:15
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 :)
And later in your js:
$('.color-picker-input').colorpicker().on('changeColor', function() {
      $(this).parent().find('.color').css("background-color", $(this).colorpicker('getValue', '#ffffff') );
        
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.