Javascript Primefaces Color Picker，如何获取ajax更改事件

我希望在更改时将从Primefaces颜色选择器中选择的颜色发送到我的后端

但这似乎没有得到支持

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

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

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

即使在更改时调用一些Javascript也会很好

---

更新：

我想支持豆更新颜色的变化，而不仅仅是当我提交表格

---

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

在更改颜色选择器时使用ajax调用是个坏主意，当用户通过拖动调色板中的选择器来选择颜色时，可能会出现100个排队的ajax调用

因此，

onHide

将更好地发挥作用。在这种情况下，我将演示两个事件的实现，并推荐

onHide

一旦改变

隐藏

colorPickerWV

是widgetVar名称

这是

这个
对象

您可以使用
onChange
eventhandler，通过添加一个超时，该超时在每次“更改”时重置，并且仅在未更改x毫秒后触发（在本例中为250秒），它可以完美地工作。请记住，我在这里使用组件的widgetVar值是为了让它在页面中的特定颜色选择器上工作，而不是自动地在所有这些选择器上工作

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);
            }
        }
    }
)

如果您有多个颜色选择器，您可以这样做：

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

“UpdateMipReview”函数是一个p:remoteCommand，用于更新目标区域：

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


除了设置
colorpoop
值之外，您还想执行一些操作吗？或者您已经对此进行了测试，并且认为在非ajax提交之前该值没有更新？您可以在onChange中添加一个超时，因此更改只会每隔x毫秒发送到服务器。如果您添加一个setTimeout，您仍然在对这些ajax请求进行排队，但会有一点延迟！不，因为只有当超时触发时，您才执行remotecommand。每次更改时，您都会重置超时。如果我有它的工作，我会张贴一个例子，即使你重置超时，后端在某一点上不会有一个值！对不起，什么时候会这样？PrimeFaces微调器也会这样做
document.body.onload = function() {
    $(".ui-colorpicker-container").each(function() {
        $(this).data('colorpicker').onHide = 
            function() {
                updateMiniPreview();
            }
        })      
};

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