Scrolling p: messages to view when they are updated, and messages (errors) are present

Question

I work with PrimeFaces messages, I want my whole page to scroll up when displayed p:messages.

Answer 1

When backing up a bean (the one that creates the posts) you should know when you are showing p:message. If so simple, do this:

RequestContext.getCurrentInstance().execute("window.scrollTo(0,0);");

Find more information here:

• http://de.selfhtml.org/javascript/objekte/window.htm#scroll_to
• jQuery examples for smooth scrolling: How to scroll up a page using jQuery?

Answer 2

Assign an identifier to your p: message component

<p:messages autoUpdate="true" id="myMessage" />

bean RequestContext.scrollTo:

RequestContext context = RequestContext.getCurrentInstance();
context.scrollTo("myMessage");

Answer 3

, .

XHTML

<p:commandButton value="Save" 
                 oncomplete="scrollToFirstMessage()" />

Javascript

//javascript function which scroll to the first message in page   
function scrollToFirstMessage() {
     try {
        PrimeFaces.scrollTo($('.ui-message :first-child').eq(0).parent().attr('id'));
     } catch(err) {
       //No Message was found!
     }
  }

, .

Answer 4

, , p:messages, bean. , / . , ().

, clientId PartialViewContext renderIds:

These customer identifiers are used to identify the components that will be processed during the visualization phase of the request processing life cycle.

Your listener might look something like this:

public class MessagesUpdateListener implements PhaseListener {

  private final String MESSAGES_ID = "yourMessagesClientId";

  @Override
  public void afterPhase(PhaseEvent event) {
    // Empty
  }

  @Override
  public void beforePhase(PhaseEvent event) {
    FacesContext fc = FacesContext.getCurrentInstance();
    if (!fc.getMessageList().isEmpty() &&
        fc.getPartialViewContext().getRenderIds().contains(MESSAGES_ID)) {
      RequestContext.getCurrentInstance().scrollTo(MESSAGES_ID);
    }
  }

  @Override
  public PhaseId getPhaseId() {
    return PhaseId.RENDER_RESPONSE;
  }

}

Be sure to register it in your faces-config.xml:

<lifecycle>
  <phase-listener>your.MessagesUpdateListener</phase-listener>
</lifecycle>

Tested with XHTML:

<h:form id="main">

  <p:messages id="messages" />
  <p:inputText id="text1" required="true" />

  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>

  <p:commandButton value="Update" update="messages text1"/>
  <p:commandButton value="No update"/>

</h:form>

To check global messages, use:

fc.getMessageList(null).isEmpty()

See also:

• Add global message when field validation fails