当另一个字段发生变化时更新字段

我确定有多种方法可以做到这一点，但是当另一个字段发生变化时更新一个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

当另一个字段发生变化时更新字段

回答

相关问题