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

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

scrollTo

public abstract void scrollTo(String clientId)

Scroll to a component after ajax request is completed.

Parameters:

clientId - Client side identifier of the component.

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

对于没有记住全部内容的初学者 NamingContainer 事实上，确定正确客户端 ID 的一种简单方法是通过右键单击查看 JSF 生成的 HTML 输出，在网络浏览器中查看源代码。

对于一个

<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"