jQuery jPicker > Assign color of jPicker from a text link (not from jPicker)

Question

I've got a list of frequently used hex colors that I'd like to list under my jPicker bound input text field and I'd like to figure out how to change the value of the jPicker active color without opening the jPicker color selector palette.

I've managed to create a function that updates the input field thats bound to the jPicker, but the colors of the background and picker.gif do not update. I'd like to force the background colors to update as if the color was selected from jPicker itself.

Here's my code for the activation link...

<span onclick=doColor(1,'cc9900')>cc9900</span>

And here's the js handler

function doColor(el, color)
 {
 if(el){$('#theme_header_color').attr('value', color);}
 else{$('#theme_sidebar_color').attr('value', color);}
 }

Answer 1

Did you try triggering a keyup event after changing the value of the input field?

function doColor(el, color) {
    $('#theme_header_color').val(color).trigger('keyup');
}

Answer 2

This is Chris Tillman, the developer of the jPicker plugin. I have just posted the new version (V1.1.0) of jPicker to http://www.digitalmagicpro.com/jPicker/. This new version reworks the internal events and re-implements some requested features that had been previously removed.

Most importantly for this issue, the Color object is now the event parent of all Color interactions, and is alterable from script code. The old event model fired events from the map, bar, and text fields and then updated the others. Now they all alter the Color object, which fires the events down.

Also in previous versions, the only way to alter the color object from code was to update the value of the text field holding the HEX value and firing the "keyup" event. Now, the new version will allow you to just call the "val" method on the active color object to update the color.

If you want to change the color in code, you can call a change directly to the Color object.

<div id="Picker">&nbsp;</div>
<div id="Favorites">
  <span title="cc9900"/>
  <span title="e2ddcf"/>
  <span title="ffcc00"/>
</div>

And then run your code like this

$.jPicker('#Picker');
$('#Favorites span').click(
  function()
  {
    $.jPicker.List[0].color.active.val('hex', $(this).attr('title'));
  });

That will update the color to the value indicated in the "title" attribute, and update all visual displays in the picker.