如何在不刷新的情况下更新页面中显示的值 [英] 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 字段中插入某些值时自动更改其值.结果变量应该这样计算(计算百分比):(val1 * 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 之类的东西.您认为最好的方法是什么?

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?

我可以避免在字段中输入不是数字的字符吗(如果按下的键不是数字，则根本不出现在输入字段中)?

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

您可以使用 <f:ajax> 和 render 属性来使用 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:Ajax在 JSF 中 - 使用 f:ajax 标签

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