Question

我正在处理PrimeFaces消息，我希望我的整个页面在呈现p:messages时滚动到顶部。

Answer 1

为您的p：message组件分配ID

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

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

＆gt; = = 6.0：

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

＆lt; 6.0：

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

在PrimeFaces 6.0中弃用

Answer 2

使用PrimeFaces弃用＆lt; 6.2

在您支持bean（生成消息的bean）中，您应该知道何时呈现p:message。如果是这样，只需执行以下操作：

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

<强>更新

使用newer PrimeFaces版本（＆gt; = 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进行平滑滚动的示例：Scroll to the top of the page using 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并检查消息是否存在，以及PartialViewContext clientId中是否存在消息组件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()

另见：

Add global message when field validation fails

在更新时将p：消息滚动到视图中并且（错误）消息存在

4 个答案: