Primefaces ColourPicker, how to get ajax event of change

javascript, jsf, jsf-2, primefaces

Solution

Having an ajax call `onChange` of the colorPicker is a bad idea, you might end up with 100 queued ajax calls as the user is picking the color by dragging the selector in the color palette.

Therefor `onHide` would serve better in that case, I'll demonstrate the two events implementations and I do recommend the `onHide`

onChange

var oldOnChange = PF('colorPickerWV').cfg.onChange;
$(document.body).children('.ui-colorpicker-container').data('colorpicker').onChange =
function(b,d,c) {
   oldOnChange.apply(this, [b,d,c]);
   console.log('valueChanged:should be remoteCommand with process of the colorPicker');
 };

onHide

var oldOnHide = PF('colorPickerWV').cfg.onHide;
$(document.body).children('.ui-colorpicker-container').data('colorpicker').onHide = 
   function(b) {
      oldOnHide.apply(this, [b]);
      console.log('Panel is hidden: should be remoteCommand with process of the colorPicker');
};

`colorPickerWV` is the widgetVar name

And here's the `this` object

Problem

I'd like to have the colour selected from a Primefaces ColourPicker sent to my backend on change. This seems not to be supported though. ``` <p:colorPicker value="#{colorView.colorPopup}" /> ``` I can see it will submit the value when the page is submitted. ``` <p:colorPicker value="#{colorView.colorPopup}" /> <p:commandButton value="Submit" oncomplete="PF('dlg').show();" update="grid" /> ``` Even some Javascript being called on change would be great. Update: I would like the backing bean to updated on colour change, not just when I submit the form. The main reason for this is that I have several colourpickers on the page and the form is submitted I don't know which value is from which colour picker.

Original source