当 p:messages 更新并且出现（错误）消息时，将其滚动到视图中

Question

我正在处理 PrimeFaces 消息，我希望在渲染

p:messages

时我的整个页面滚动到顶部。

Answer 1

为您的 p:message 组件分配一个 ID

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

然后，在您的支持 bean 中调用 RequestContext.scrollTo 方法：

• 在 PrimeFaces >= 6.0 中：

  PrimeFaces.current().scrollTo("myMessage")
  

• 在 Primefaces < 6.0:

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

  PrimeFaces 6.0 中已弃用

Answer 2

PrimeFaces 已弃用 < 6.2

在你的支持bean（产生消息的bean）中，你应该知道何时渲染

p:message

。如果是这样，只需执行以下命令：

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

更新：

在较新的 PrimeFaces 版本（>= 6.2）中，在客户端执行 Javascript 的方法是（通过使用 x 和 y 坐标）：

PrimeFaces instance = PrimeFaces.current();
instance.execute("window.scrollTo(0,0);");

要滚动到

元素，请使用元素的 clientId：

PrimeFaces instance = PrimeFaces.current();
instance.scrollTo("myElementsClientId");

在此处查找更多信息：

• http://de.selfhtml.org/javascript/objekte/window.htm#scroll_to
使用 jQuery 实现平滑滚动的示例：
• 使用 JavaScript/jQuery 滚动到页面顶部？

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 中执行代码。这要求您在每个操作中执行/调用相同的操作。没有显示如何在渲染（更新）时滚动到消息组件。

您可以实现一个

phase Listener 并检查消息是否存在，以及消息组件的 clientId

 是否存在于 

PartialViewContext renderIds

:

这些客户端标识符用于标识将在请求处理生命周期的渲染阶段处理的组件。

你的听众可能看起来像这样：

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;
  }

}

确保在您的

faces-config.xml

中注册：

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

使用 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>

要检查全局消息，请使用：

fc.getMessageList(null).isEmpty() 另请参阅：

• 字段验证失败时添加全局消息