How to call changeColor method for bootstrap colorpicker?
I used bootstrap colorpicker adding bootstrap-colorpicker.css and js as shown 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 launched a textbox by giving it an ID. Now my requirement is to run the method every time the user changes the color. The textarea is closed, so I cannot use the onchange method for it.
I am using the .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 solve this? There is a way that can be used to change the color: -
$('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
bodyStyle.backgroundColor = event.color.toHex();
});
But I don't use this constructor anywhere. Please suggest how to use this?
source to share
I figured it out myself. Wrote the above method in docs.js as shown below:
$('#myColorPicker').colorpicker().on('changeColor',
function(ev) {
changeTableColor('myColorCode');
});
I don't call this constructor manually, but it's there in docs.js hardcoded with id $ ('# myColorPicker'). Silly, but that was the problem. So I duplicated the code here with my ID and called my method on the "changecolor" event.
Thank:)
source to share
Input for color selection with color field:
<div>
<input type="text" class="color-picker-input" >
<span class="color"></span>
</div>
And later in js:
$('.color-picker-input').colorpicker().on('changeColor', function() {
$(this).parent().find('.color').css("background-color", $(this).colorpicker('getValue', '#ffffff') );
});
source to share