Question

I am using jPicker, because I needed a color picker which supported ‘no color’ or ‘transparent’. If you have a better picker plugin in mind, please do let me know.

Anyway, the problem is, as soon as someone selects a color, I need to close the jPicker window and trigger an ajax call with that color value.

I tried:

$('#fColor').jPicker({window:{expandable:true,liveUpdate:false}});
$('#fColor').change(function(){
    $(".jPicker.Container").slideUp(200);
    buildImg();
});

But jPicker doesn’t close on color select and update seems to be working even though I set liveUpdate to false. And the ajax function isn’t triggered as well. Any ideas?

Answer 1

You can use following code to listen jpicker change event and get the value of it. This example is given in jpicker page.

 $('#Callbacks').jPicker(
    {},
    function(color, context)
    {
      var all = color.val('all');
      buildImg(all && '#' + all.hex || 'transparent'); //ajax call here
      $('#fColor').jPicker().hide(); // hide jpicker
    }
 );

And define your ajax call details using jquery manual page. Here is a sample:

function buildImg(_color) {
    $.post("test.php", { color: _color} );
}