0

I'm developing a Joomla component and I want to detect onchange in a Color form field.

In the xml of my model this is how I have defined the color field

<field name="background_color" type="color" class="control-change"
label="COM_XXX_FORM_LBL_MAP_BACKGROUND_COLOR"
description="COM_XXX_FORM_DESC_MAP_BACKGROUND_COLOR" 
default="#afdce6" 
/>

Joomla framework creates the following HTML. It uses Minicolors for the color picker

    <div class="control-group">
<div class="control-label"><label id="jform_background_color-lbl" for="jform_background_color" class="hasTooltip" title="" data-original-title="<strong>Background Color</strong><br />Background color">
Background Color</label></div>
<div id="background-color" class="controls"><span class="minicolors minicolors-theme-bootstrap minicolors-swatch-position-left minicolors-swatch-left minicolors-position-right"><span class="minicolors-swatch"><span style="background-color: rgb(175, 220, 230);"></span></span><input type="text" name="jform[background_color]" id="jform_background_color" value="#afdce6" placeholder="#rrggbb" class="minicolors control-change minicolors-input" data-position="right" data-control="hue" size="7" maxlength="7"><span class="minicolors-panel minicolors-slider-hue"><span class="minicolors-slider"><span class="minicolors-picker" style="top: 70.4545454545455px;"></span></span><span class="minicolors-opacity-slider"><span class="minicolors-picker"></span></span><span class="minicolors-grid" style="background-color: rgb(0, 208, 255);"><span class="minicolors-grid-inner"></span><span class="minicolors-picker" style="top: 14px; left: 36px;"><span></span></span></span></span></span>     </div>
</div>

When I change the color in the color picker, the value of the input field doesn't update, but the value of the color box changes right. I'll show you it in the following screenshot.

Any ideas of How can I get the color value with jquery? I need it to update the background color when it changes.

Thanks :)

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
alejandrodf
  • 1
  • 1

1 Answers1

0

Get the first one by:

$(".minicolors-swatch span").css("background-color");

And the next one by:

$("#jform_background_color").css("background-color");

To update the above, just use the following code.

$(".minicolors-swatch span").css("background-color", new_color);
$("#jform_background_color").css("background-color", new_color);

Where, new_color is the new colour that you have stored as "blue" (colour) or "#f00" (hex code).

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Hi Praveen. Thanks for your quick reply. Your code is great to get the color value :) Do you know how can I detect the change in js("#background-color .minicolors-swatch span").css("background-color")? I need to detect the change for updating the color in realtime – alejandrodf Jul 06 '15 at 08:36
  • @alejandrodf Have a look at: http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery – Praveen Kumar Purushothaman Jul 06 '15 at 08:39