Primefaces RequestContext scrollTo不起作用

Question

Primefaces v3.5

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

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

豆:

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的引用:

scrollTo

public abstract void scrollTo(String clientId)

在ajax请求完成后滚动到组件.

参数:

clientId - 组件的客户端标识符.

看,它说客户端ID,而不是组件ID.这也很有意义,滚动工作最终由JavaScript document.getElementById()和朋友完成.这仅适用于客户端ID.

对于没有记住整个NamingContainer事物的初学者来说,通过右键单击webbrowser中的View Source,查看 JSF生成的HTML输出,可以轻松找到正确的客户端ID .

为一个

<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 update/render组件的客户端ID？找不到带有"bar"引用的表达式"foo"的组件