3

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。

4

1 回答 1

5

你看过文档吗?RequestContext#scrollTo()这是来自javadoc的引用:

滚动到

public abstract void scrollTo(String clientId)

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

参数:

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

看,它说的是客户端 ID,而不是组件 ID。这也是有道理的,滚动工作最终由 JavaScript via document.getElementById()and friends 完成。这仅适用于客户端 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>不是一个EditableValueHoldernor组件,因此ActionSource不需要放置在UIForm组件中。这样您就可以继续使用您的初始尝试。

也可以看看:

于 2013-07-19T16:36:56.913 回答