Primefaces RequestContext scrollTo 不起作用

Question

Primefaces v3.5

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

XHTML sn-ps：

<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()}" />

豆子：

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 内容的初学者来说，确定正确客户端 ID 的一种简单方法是通过右键单击查看 JSF 生成的 HTML 输出，查看源代码在 webbrowser .

为了一个

<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 组件中。这样您就可以继续使用您的初始尝试。

另见：

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"