Как обновить значение, отображаемое на странице, без обновления

Question

У меня есть 3 поля на странице JSF

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

И у меня также есть компонент поддержки с этими атрибутами:

@ManagedBean
@RequestScoped
public class NewOfferSupportController {

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

//Get set methods...
}

Я хочу, чтобы элемент outputText изменил свое значениеавтоматически, когда некоторые значения вставляются в поля val1 и val2 без обновления страницы.Переменная результата должна быть рассчитана следующим образом (она рассчитывает процент): (val1 * val2) / 100

Можете ли вы помочь мне решить некоторые мои сомнения?:

Я знаючто для этого мне нужно что-то вроде javascript или AJAX. Как вы думаете, что должно быть лучшим способом сделать это?

Мне бы хотелось знать, как я могу сделать это с AJAX, не могли бы вы дать мне несколько советов?

Так как мне нужно, чтобы поля были типа String, как будет реализована моя проверка?

Могу ли я просто избегать ввода символов, не являющихся цифрами, в поля (если нажатаклавиша не является числом, вообще не отображается в поле ввода)?

Answer 1

Если это простой расчет, который не требует обращения к серверу, то вам следует воспользоваться решением javascript на стороне клиента

---

Но так как вы любите делать это с помощью Ajax, то вы идете ..

Вы можете использовать атрибуты <f:ajax> и render, чтобы сделать это, используя 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

Answer 2

Если вы используете Java, тогда получите JQuery.После того, как вы обработали и получили желаемый результат с вашим кодом, вы можете просто взять элемент dom, в который вы хотите поместить его, и сделать что-то вроде этого: