valueChangeListener and JS

valueChangeListener and JS валидация и обработка форм. Проблемы и подводные камни
Для Prime Faces большим плюсом есть легкость работы с JS и динамическим обновлением контентаДля многих компонентов мы можем писать ajax слушатели событий, то ли при изменении,толи при нажатии, то ли другое действие. Для того чтоб это работало мы используем <p:ajax event/>, но Prime Faces также дает возможность писать листенеры в самих компонентах, например мы используем <p:calendar/> или другой компоненту него есть такое свойство как valueChangeListener, где мы можем написать метод для обработкидействий, когда пользователь изменяет значение компонента или елемента.Метод должен выглядеть следующим образом
 public void updateDate(ValueChangeEvent ev) {
  //TODO: writw code
 }
valueChangeListener and JS валидация и обработка форм. Проблемы и подводные камни
Для Prime Faces большим плюсом есть легкость работы с JS и динамическим обновлением контентаДля многих компонентов мы можем писать ajax слушатели событий, то ли при изменении,толи при нажатии, то ли другое действие. Для того чтоб это работало мы используем <p:ajax event/>, но Prime Faces также дает возможность писать листенеры в самих компонентах, например мы используем <p:calendar/> или другой компоненту него есть такое свойство как valueChangeListener, где мы можем написать метод для обработкидействий, когда пользователь изменяет значение компонента или елемента.Метод должен выглядеть следующим образом public void updateDate(ValueChangeEvent ev) {  //TODO: writw code }   сдесь главное чтоб аргумент метода был ValueChangeEvent ev, где мы можем писать обработчик для своего метода и изменения значений и следующей его обработке.Все вроде красиво и приятно, но проблема с valueChangeListener появляется когда у вас есть форма и вы стараетесь сделать submit и тут проблема – не прошла валидация и мы видим сообщение о ошибках валидации. После этого мы сталкиваемся с проблемой, что наши valueChangeListener не будет срабатывать, так как валидация влияет на ajax события.Что нам нужно: это обновить наши компоненты с Бина и заставить форму сбросить процесс проверки на валидацию.Начнем с первого, обновить компоненты с Бина. Для этого мы будем использовать свойство и возможность Prime Faces – <p:remoteCommand name=”test” update=”” proces=””/> сдесь все понятно, указываем что обновляем и что не хотим. Теперь нам нужно вызвать remoteCommand с Бина. Сделать это можно следуещим способом. В любом наше бине пишем следующий код
RequestContext context = RequestContext.getCurrentInstance(); 
context.execute("test();");

Мы вызываем наш remoteCommand и все идет хорошо. Но это не сработает пока у нас форма знает и помнить про ошибки валдиации. Нам нужно сбросить эти параметры для формы. Мы модернизируем наш код следующим способом:

<p:remoteCommand name="test" update="" global="false" process="@this"> 
   <f:actionListener type="CleanForms" />
</p:remoteCommand>

У нас появился actionListener, мы дожны написать код для него, который и будет бороться с тем, чтоб сбросить форму и заставить ее думать что валидационных ошибок нет. 

Перейдем к самому коду CleanForms

public class CleanForms implements ActionListener {
  
   @Override
   public void processAction(ActionEvent event) throws AbortProcessingException {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    PartialViewContext ajaxContext = facesContext.getPartialViewContext();
    UIComponent root = facesContext.getViewRoot();
    Collection<String> renderIds = ajaxContext.getRenderIds();
    for (String renderId : renderIds) {
      UIComponent form = findParentForm(root.findComponent(renderId));
      if (form != null) {
       clearComponentHierarchy(form);
      }
    } 
  }
private void clearComponentHierarchy(UIComponent pComponent) {
  if (pComponent.isRendered()) {
    if (pComponent instanceof EditableValueHolder) {
       EditableValueHolder editableValueHolder = (EditableValueHolder) pComponent;
       editableValueHolder.setSubmittedValue(null);
       editableValueHolder.setValue(null);
       editableValueHolder.setLocalValueSet(false);
       editableValueHolder.setValid(true);
     }
  
   for (Iterator<UIComponent> iterator = pComponent.getFacetsAndChildren(); iterator.hasNext();) {
     clearComponentHierarchy(iterator.next());
   }
  }
}


public UIComponent findParentForm(UIComponent component) {  
  for (UIComponent parent = component; parent != null; parent = parent.getParent()) {
    if (parent instanceof UIForm) {
       return parent;
    }
  }  
  return null;



}

Этот компонент и сделает всю работу за нас. Он проверит страницу, найдет формы и обнулить для них проблему с валидацией и тогда наш valueChangeListener заработает как нужно и никаких проблем Вы не почувствуете.

Мне на работе это очень пригодилось и надеюсь что Вам тоже когдато пригодится и сэкономит время. С этой проблемой в нете боряться по разному, такчто Вы вольны выбирать и писать код сами))). Удачи Вам в написании кода.

Please follow and like us:

Leave a Comment