Primefaces RequestContext scrollTo不起作用

Question

Primefaces v3.5

在ajax请求结束时，尝试使用RequestContext.getContext().scrollTo("")以编程方式滚动到我的表单。

XHTML片段：

<h:form id="genericMessagesForm">
                    <p:messages id="genericMessages" />
                </h:form>
<p:commandButton id="testButton" 
            value="Test" process="#{cc.attrs.itemName}Final, @this"
                actionListener="#{myBean.methodCalledByAjax()}" />

Bean：

public void methodCalledByAjax() {
    List<String> updateTargets = new ArrayList<String>();
                updateTargets.add("currentRecordForm");
                updateTargets.add("genericMessagesForm");
                RequestContext.getCurrentInstance().update(updateTargets);
                RequestContext.getCurrentInstance().scrollTo("genericMessagesForm");
}

更新可以工作。

ScrollTo不起作用（ID相同！）。

没有引发服务器错误。

没有引发javascript控制台错误。

尝试过的浏览器：Firefox（最新版本）、Chrome（最新）、IE8。

Answer 1

您查看了文档吗？下面引用RequestContext#scrollTo()javadoc:

滚动到

public abstract void scrollTo(String clientId)

ajax请求完成后滚动到某个组件。

参数：

clientId—组件的客户端标识符。

看，它说的是客户端ID，而不是组件ID。同样有道理的是，滚动工作最终是由JavaScript通过document.getElementById()和朋友完成的。这只适用于客户端ID。

对于那些还没有记住NamingContainer的全部内容的初学者来说，一个简单的方法是通过右键单击查看JSF生成的HTML输出，在Web浏览器中查看源代码。

对于

<h:form id="genericMessagesForm">
    <p:messages id="genericMessages" />
</h:form>

这就有点像

<form id="genericMessagesForm" ...>
    <div id="genericMessagesForm:genericMessages" ...>
        ...
    </div>
</form>

因此，相应地修复调用：

requestContext.scrollTo("genericMessagesForm:genericMessages");

顺便说一句，如果表单只包含<p:messages>，那么您也可以完全去掉整个表单。<p:messages>既不是EditableValueHolder也不是ActionSource组件，因此不需要放置在UIForm组件中。这样你就可以继续使用你最初的尝试。

另请参阅：

• 如何找到ajax更新/渲染组件的客户端ID？找不到表达式为"的组件；foo"；引用自"；条"