Primefaces ColourPicker,如何获取ajax事件的变化

jef*_*ter 3 javascript jsf primefaces jsf-2

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

但这似乎不受支持。

  <p:colorPicker value="#{colorView.colorPopup}" />
Run Code Online (Sandbox Code Playgroud)

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

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

即使是一些被调用的 Javascript 也会很棒。


更新:

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

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

Hat*_*mam 6

onChange对 colorPicker进行 ajax 调用是一个坏主意,当用户通过拖动调色板中的选择器来选择颜色时,您可能会遇到 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');
 };
Run Code Online (Sandbox Code Playgroud)

隐藏

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');
};
Run Code Online (Sandbox Code Playgroud)

colorPickerWV 是 widgetVar 名称

这是this对象

在此处输入图片说明