如何在不刷新更新页面上显示的值 [英] How to update a value displayed in the page without refreshing

问题描述

我有一个JSF页面这3场

I have this 3 fields in a JSF page

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

和我也有一个后台bean与此属性：

And i also have a backing bean with this attributes:

@ManagedBean
@RequestScoped
public class NewOfferSupportController {

   private String val1;
   private String val2;
   private String result;

//Get set methods...
}

我要的outputText元素时，一些值插入val1和val2中没有页面被刷新的字段自动改变其值。 结果变量应该这样计算（这是计算的百分比）：（VAL​​1 * val2次）/ 100

I want the outputText element to change its value automatically when some values are inserted in the fields val1 and val2 without the page being refreshed. The result variable should be calculated this way(It is calculating a percentage): (val1 * val2) /100

您可以给我一个手解决一些我的疑惑：

Can you give me a hand solving some of my doubts?:

我知道，这样做我需要的东西如JavaScript或AJAX.What你认为应该做到这一点的最好方法是什么？

I know that for doing this i need something like javascript or AJAX.What do you think should be the best way to do it?

编号爱知道我怎么能做到这一点的AJAX，你能给我一些建议吗？

Id love to know how could i do it with AJAX, could you give me some tips?

因为我需要的字段是String类型的，如何将我的验证应该执行？

Since i need the fields to be of type String, how will my validation should be implemented?

我可以只避免不在位的字段进行键入的字符（如pressed关键不是数字，不要在输入字段出现在所有）？

Can i just avoid characters that are not digits to be typed in the fields(If the pressed key is not a number, don't appear at all in the input field)?

推荐答案

如果这是简单的计算，它不需要调用服务器，那么你应该用客户端去JavaScript的解决方案

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

不过，当你喜欢做它使用Ajax在这里你去。

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

您可以使用＆LT; F：。AJAX＆GT; 和渲染属性，使这个事情发生使用AJAX

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
    }

}

---

另请参见

• JSF2：阿贾克斯在JSF - 使用F：AJAX标记

这篇关于如何在不刷新更新页面上显示的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！