Update a field when another field changes

问题

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?

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

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.

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

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

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

Thanks

回答1:

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

Or.. You can use primefaces onSlideEnd event.

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

based on this

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

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>

回答2:

I think is much easier to use a solution based on PrimeFaces instead of using one based on JavaScript. So, in my case I used this and it works for me.

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>

来源：https://stackoverflow.com/questions/10542315/update-a-field-when-another-field-changes

标签

jsf-2

primefaces