当另一个字段更改时更新一个字段 [英] Update a field when another field changes

问题描述

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

I'm sure there's more than one way to do this, but what's a good way of updating one JSF/PrimeFaces component when another one changes?

我有一个滑块，可以使用其值(包括备用Bean中的值)正确更新输入字段.但是该值是一个数字，我想将其显示为文本值，例如如果是1，我要显示简单"，如果是4，则要显示困难".

I've got a slider, that correctly updates an input field with it's value (including the value in the backing bean). But that value is a number, and I want to display it as a text value e.g. if it's 1, I want to display "Easy" and if it's 4, display "Difficult".

通过隐藏存储数值的输入字段，使它部分起作用.然后，我在后备bean中添加了另一个链接到getter的可见" outputLabel，它将数字转换为文本值.

I've got it partly working by hiding the input field that stores the numeric value. And then I've added another 'visible' outputLabel that is linked to a getter in my backing bean that translates the numbers to text values.

但是我不确定如何说当隐藏字段的值更改时，刷新显示在outputLabel中的值".

But I'm not sure how to say "when the hidden field's value changes, refresh the value displayed in the outputLabel".

当然，这与valueChangeListeners或"update"属性有关，但是却很难将它们放在一起.

Sure it's something to do with valueChangeListeners or 'update' attributes, but struggling to put it all together.

有人能指出我正确的方向吗?尽管我已经尝试过了，但还不太确定对Google会做什么.

Can anyone point me in vaguely the right direction? Not even quite sure what to Google, though I have tried.

谢谢

推荐答案

使用Javascript onchange事件，只需将标签更新为所需的标签即可.

Use Javascript onchange event and just update the label with the desired one.

或者.您可以使用素数onSlideEnd事件.

Or.. You can use primefaces onSlideEnd event.

valueChangeListeners会一直到达后备bean，然后再返回到客户端

valueChangeListeners will go all the way to the backing bean and then come back to the client

基于此

我有一个滑块，可以使用它正确更新输入字段 值(包括辅助Bean中的值).但是那个值是一个 数字，我想将其显示为文本值，例如如果是1，我 想要显示简易"，如果是4，则显示困难".

I've got a slider, that correctly updates an input field with it's value (including the value in the backing bean). But that value is a number, and I want to display it as a text value e.g. if it's 1, I want to display "Easy" and if it's 4, display "Difficult".

您需要做的是一个JavaScript onchange事件并更新标签.

All you need is a JavaScript onchange event and update the label.

这里是一个示例(我没有测试过它或没有检查过语法，但是应该可以给您一个思路) 用户第一次进入时，可以像设置滑块的默认值一样从服务器或客户端初始化标签.

Here is an example (I didnt test it or checked the syntax, but it should give you an idea) For the first time the user gets in you can initialize the label from the server or the client just as you set the default value for the slider.

  <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> 

这篇关于当另一个字段更改时更新一个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！