如何更新页面中显示的值而不刷新

时间:2021-03-08 00:01:50

I have this 3 fields in a JSF page

我在JSF页面中有这3个字段

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

And i also have a backing bean with this attributes:

而且我还有一个具有以下属性的支持bean:

@ManagedBean
@RequestScoped
public class NewOfferSupportController {

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

//Get set methods...
}

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

我希望outputText元素在字段val1和val2中插入某些值时自动更改其值,而不刷新页面。结果变量应该以这种方式计算(它计算一个百分比):( val1 * val2)/ 100

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

你能帮我解决一些疑惑吗?:

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?

我知道,为了做到这一点,我需要像javascript或AJAX这样的东西。您认为应该是最好的方法吗?

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

我很想知道如何用AJAX做到这一点,你能给我一些提示吗?

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

由于我需要字段为String类型,我的验证将如何实现?

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

我可以避免在字段中输入不是数字的字符(如果按下的键不是数字,在输入字段中根本不显示)?

2 个解决方案

#1


4  

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

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


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

但是你喜欢在这里使用Ajax来实现它...

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

您可以使用 和render属性来使用AJAX实现此功能。 :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

也可以看看

#2


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:

如果您正在使用java,那么获取JQuery。一旦您使用代码处理并获得了所需的结果,您就可以抓住要放入其中的dom元素并执行以下操作:

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

#1


4  

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

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


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

但是你喜欢在这里使用Ajax来实现它...

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

您可以使用 和render属性来使用AJAX实现此功能。 :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

也可以看看

#2


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:

如果您正在使用java,那么获取JQuery。一旦您使用代码处理并获得了所需的结果,您就可以抓住要放入其中的dom元素并执行以下操作:

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