Primefaces ColourPicker，如何获得变更的ajax事件

Question

我希望将Primefaces ColourPicker中的颜色从发送到我后端的颜色中选择。

但这似乎不受支持。

  <p:colorPicker value="#{colorView.colorPopup}" />

我可以看到它会在提交页面时提交值。

  <p:colorPicker value="#{colorView.colorPopup}" />
  <p:commandButton value="Submit" oncomplete="PF('dlg').show();" update="grid" />

甚至一些Javascript被调用也会很棒。

---

更新

我希望支持bean更新颜色变化，而不仅仅是在我提交表单时。

主要原因是我在页面上有几个colourpickers并且表单已提交我不知道哪个值来自哪个颜色选择器。

Answer 1

使用colorPicker的ajax调用onChange是一个坏主意，当用户通过在调色板中拖动选择器来选择颜色时，最终可能会有100个排队的ajax调用。

因此onHide会更好地服务，我将展示两个事件的实现，我建议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是widgetVar名称

这是this对象

Answer 2

您可以使用onChange事件处理程序，并添加在每次更改时重置的超时时间。并且只有在没有变化的x毫秒（在这种情况下为250）之后才会触发，它完美地工作。请记住，我在这里使用了组件的widgetVar值，让它在页面中的特定ColorPickers上工作，而不是自动化所有这些。

var oldonChange = PF(widgetVar).cfg.onChange;
$(document.body).children('.ui-colorpicker-container').each(
    function(i, element) {
        var overlay = $(element), options = overlay.data('colorpicker');
        if (options.id == PF(widgetVar).id) {
            _self = PF(widgetVar);
            options.onChange = function(a, b, c) {
                oldonChange.apply(_self, [a, b, c ]);
                clearTimeout(_self.submitTimer);
                _self.submitTimer = setTimeout(function() {
                    console
                       .log('Data is changed: should be remoteCommand with process of the colorPicker')
                    //The call below is what the name of the remote command is
                    //window[widgetVar+"_change"]();

                }, 250);
            }
        }
    }
)

Answer 3

如果您有多个采色器，可以这样做：

document.body.onload = function() {
    $(".ui-colorpicker-container").each(function() {
        $(this).data('colorpicker').onHide = 
            function() {
                updateMiniPreview();
            }
        })      
};

＆＃34; updateMiniPreview＆＃34; function是一个p：remoteCommand，用于更新目标区域：

<p:remoteCommand update="miniPreview" name="updateMiniPreview" />