Fire event without change
I'm trying to fire an event without change happening and I'm having some trouble figuring it out.
I have the Kendo UI widget on my webpage and the default value is #000000 when the color picker loads. If I click the Apply button in the color picker the 'change' event doesn't fire because I didn't change anything. If I change the slider and click 'Apply' then the value changes and is also put into the 'input text' field.
How do I get it so the value #000000 is set when I click Apply without changing anything?
Code snippet:
<input type="text" class="text colorPicker" size="25" maxlength="100" title="${geo:loc attribute="title" phrase="Please enter the hexadecimal value for the font color." /}" name="${geo:object name='CntwChooseColorScheme.PRIMHEAD_FONTCOLOR' attribute='name'/}" id="${geo:object name='CntwChooseColorScheme.PRIMHEAD_FONTCOLOR' attribute='id'/}" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMHEAD_FONTCOLOR)' attribute='value'/}" />
<input id="primaryheaderfontcolor" type="color" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMHEAD_FONTCOLOR)' attribute='value'/}" />
<script>
$("#primaryheaderfontcolor").kendoColorPicker({
value: "#000000",
buttons: true,
change: function(e) {
$('#prim_head_font_color').val(e.value);
console.log("The picked color is ", e.value);
console.log(e);
}
});
</script>