當另一個字段發生變化時更新字段

我確定有多種方法可以做到這一點，但是當另一個字段發生變化時更新一個JSF/PrimeFaces組件的好方法是什麼？當另一個字段發生變化時更新字段

我有一個滑塊，用它的值正確更新輸入字段（包括支持bean中的值）。但是這個值是一個數字，我想把它顯示爲一個文本值，例如如果是1，我想顯示「Easy」，如果是4，則顯示「Difficult」。

我已經通過隱藏存儲數值的輸入字段來部分工作。然後我添加了另一個'visible'outputLabel，它鏈接到我的支持bean中的getter，將數字轉換爲文本值。

但我不知道該怎麼說「當隱藏字段的值發生變化時，刷新outputLabel中顯示的值」。

確定這與valueChangeListeners或'update'屬性有關，但努力把它放在一起。

任何人都可以隱約地指出我的正確方向嗎？儘管我已經嘗試過，但甚至不太確定谷歌應該如何。

感謝

來源

2012-05-10 Richard

使用JavaScript onchange事件，只是更新所需的一個標籤。

或..您可以使用primefaces onSlideEnd事件。

valueChangeListeners將一路去到後臺bean，然後回來在此基礎上

我有一個滑塊客戶

，與它的是正確更新的輸入域值（包括後臺bean中的值）。但是，該值爲，我想將其顯示爲文本值，例如如果是1，我想顯示「Easy」，如果是4，則顯示「困難」。

您只需要一個JavaScript onchange事件並更新標籤。

這裏是一個例子（我沒有測試它或檢查語法，但它應該給你一個想法）用戶第一次進入你可以初始化服務器或客戶端的標籤，就像你設置滑塊的默認值。

<script> 
     var labelElement = document.getElementById('output'); 
     var sliderElement = document.getElementById('txt2'); 

     function updateSliderLabel(){ 
     if(sliderElement.value > 75){ 
       labelElement.value = "Large"; 
     } else if(sliderElement.value > 50){ 
       labelElement.value = "Avg"; 
     } else { 
       labelElement.value = "Small"; 
     } 

     } 
    </script> 

    <h:form id="form"> 
    <h:panelGrid columns="1" style="margin-bottom:10px"> 
     <h:panelGroup> 
      <h:outputText value="Set ratio to "/> 
      <h:outputText id="output" value="#{sliderBean.number2}"/> 
     </h:panelGroup> 

     <h:inputHidden id="txt2" value="#{sliderBean.number2}" /> 
     <p:slider onSlideEnd="updateSliderLabel()" for="txt2" display="output" style="width:200px" /> 
    </h:panelGrid> 
    </h:form>

來源

2012-05-10 21:27:16

優秀，感謝。我在想這個太過分了（我以爲我必須用一些非Javascript的方式來實現它 - JSF是新的）。你的例子很好。我唯一需要改變的是向表單添加'prepentId =「false」'屬性，因爲我的'txt2'元素的id類似於j_idt22：txt2，我無法通過id獲取元素，直到我做過某事。現在效果很好，非常感謝。 – Richard

我認爲使用基於PrimeFaces的解決方案而不是基於JavaScript的解決方案要容易得多。所以，在我的情況下，我用這個，它適用於我。

SliderBean：

package ma.klagrida; 

import javax.faces.bean.ManagedBean; 


import org.primefaces.event.SlideEndEvent; 

@ManagedBean 
public class SliderBean { 

    private int number; 

    private String category = "Start"; 

    public int getNumber() { 
     return number; 
    } 

    public void setNumber(int number) { 
     this.number = number; 
    } 


    public String getCategory() { 
     return category; 
    } 

    public void setCategory(String category) { 
     this.category = category; 
    } 

    public void onSlideEnd(SlideEndEvent event) { 
     int value = event.getValue(); 
     if(value > 0 && value <= 50) { 
      category = "Easy"; 
     } else if(value > 50 && value <= 100) { 
      category = "Difficult"; 
     } else { 
       category = "Start"; 
     } 
    } 

}

的index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html" 
     xmlns:p="http://primefaces.org/ui"> 
<h:head><title>PrimeFaces Slider</title> 
</h:head> 
<h:body> 

<h:form> 
    <h:inputText id="number" value="#{sliderBean.number}" /> 
    <p:slider for="number"> 
     <p:ajax event="slideEnd" listener="#{sliderBean.onSlideEnd}" update="category" /> 
    </p:slider> 
    <h:inputText id="category" value="#{sliderBean.category}" /> 
</h:form> 

</h:body></html>

來源

2015-01-08 14:35:08 klagrida

當另一個字段發生變化時更新字段

回答

相關問題