Question

我确信有多种方法可以做到这一点，但是当另一个JSF / PrimeFaces组件发生变化时，更新一个JSF / PrimeFaces组件的好方法是什么？

我有一个滑块，用它的值正确更新输入字段（包括辅助bean中的值）。但该值是一个数字，我想将其显示为文本值，例如如果它是1，我想显示“Easy”，如果它是4，则显示“Difficult”。

我通过隐藏存储数值的输入字段来部分工作。然后我添加了另一个'可见'outputLabel，它链接到我的支持bean中的getter，它将数字转换为文本值。

但是我不知道如何说“当隐藏字段的值发生变化时，刷新outputLabel中显示的值”。

当然这与valueChangeListeners或'update'属性有关，但很难将它们放在一起。

有人能指出我的方向正确吗？虽然我已经尝试过，但我甚至不确定谷歌会怎么做。

由于

Answer 1

使用Javascript onchange事件，只需使用所需的标签更新标签。

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

valueChangeListeners将一直转到支持bean，然后返回客户端

基于此

我有一个滑块，用它来正确更新输入字段 value（包括辅助bean中的值）。但那个价值是一个数字，我想将其显示为文本值，例如如果它是1，我想显示“简单”，如果是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>

Answer 2

我认为使用基于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>

当另一个字段更改时更新字段

2 个答案: