How to update a value displayed in the page without refreshing

Question

I have this 3 fields in a JSF page

Answer 1

If you're using java, then get JQuery. Once you have processed and gotten a desired result with your code, you could just grab the dom element you want to place it in and do something like so:

$("#result").html(newData);

Answer 2

If this is simple calculation, which doesn't need server call then you should go with client side javascript solution

---

But As you love to do it using Ajax here you go..

You can use <f:ajax> and render attribute to make this thing happen using AJAX .

<h:form> 
      <h:inputText value="#{managedBean.val1}" > 
         <f:ajax event="keyup" render="result" listener="#{managedBean.someThingToDoListener}"/> 
      </h:inputText> 
      <h:inputText value="#{managedBean.val2}" > 
        <f:ajax event="keyup" render="result" listener="#{managedBean.someThingToDoListener}"/> 
      </h:inputText> 

      <h:outputText id="result" value="#{managedBean.result}"/>
</h:form>

---

@ManagedBean(name = "managedBean") 
public class Bean { 
   private String val1; // getter and setter 
   private String val2; // getter and setter 
   private String res; // getter and setter 
   ... 

   public void someThingToDoListener(AjaxBehaviorEvent event) { 
       //res = some processing
    }

}

---

See Also

• JSF2: Ajax in JSF – using f:ajax tag