Primefaces ColourPicker，如何獲得ajax事件的變化

我想從Primefaces ColourPicker中選擇顏色發送到我的後端變化。Primefaces ColourPicker，如何獲得ajax事件的變化

雖然這似乎不被支持。

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

我可以看到它會提交頁面提交時的值。

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

即使一些JavaScript被稱爲改變將是偉大的。

更新：

我想支持bean來更新顏色變化，不只是當我提交表單。

這樣做的主要原因是我在頁面上有幾個顏色選擇器，並且表單被提交我不知道哪個顏色選擇器來自哪個值。

來源

2014-12-01 jeff porter

你想除了設置'colorPopup'值之外還要執行一些操作？還是說你已經測試了這個，並且認爲這個值在非ajax提交之前沒有更新？ – yannicuLar 2014-12-02 08:15:08

有一個ajax調用onChange colorPicker是一個壞主意，當用戶通過拖動調色板中的選擇器來選擇顏色時，最終可能會有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對象

enter image description here

來源

2014-12-02 09:09:14

您可以在onChange中添加一個超時，所以更改只會每x毫秒發送到服務器 – Kukeltje 2015-03-19 11:24:22

即使添加了setTimeout，您仍在排隊這些ajax請求，但有點延遲！ – 2015-03-19 11:29:38

不，只有在超時激活時纔會執行遠程命令。在每個onChange上重置超時。如果我有它的工作，我會發佈一個例子 – Kukeltje 2015-03-19 11:31:11

您可以使用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); 
      } 
     } 
    } 
)

來源

2015-03-19 16:47:32 Kukeltje

如果你有幾個colorpickers你可以做這樣的：

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

的「updateMiniPreview」功能是AP：remoteCommand其更新目標區域：

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

來源

2015-09-28 07:21:36

Primefaces ColourPicker，如何獲得ajax事件的變化

回答

相關問題