Primefaces RequestContext scrollTo不起作用 [英] Primefaces RequestContext scrollTo does not work

问题描述

Primefaces v3.5

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

Trying to use RequestContext.getContext().scrollTo("") to scroll to my form programmatically at the end of an ajax request.

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！).

ScrollTo does NOT work (same ID!).

没有引发服务器错误.

没有引发JavaScript控制台错误.

No javascript console errors thrown.

浏览器尝试过::Firefox(最新)，Chrome(最新)，IE8.

Browsers tried: Firefox (latest), Chrome (latest), IE8.

推荐答案

您看过文档吗?这是来自

Did you look in the documentation? Here's a cite from the RequestContext#scrollTo() javadoc:

scrollTo

public abstract void scrollTo(String clientId)

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

Scroll to a component after ajax request is completed.

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

clientId - Client side identifier of the component.

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

Look, it says client ID, not component ID. It makes also sense, the scrolling job is ultimately done by JavaScript via document.getElementById() and friends. That works only with a client ID.

对于尚未记住全部内容的入门者 NamingContainer ，找到正确的客户端ID的一种简单方法是通过右键单击Webbrowser中的 View Source 查看JSF生成的HTML输出.

For starters who haven't memorized the whole NamingContainer thing, an easy way to figure the right client ID is by looking at the JSF-generated HTML output via rightclick, View Source in webbrowser.

对于

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

那就像

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

因此，请相应地解决此呼叫:

So, fix the call accordingly:

requestContext.scrollTo("genericMessagesForm:genericMessages");

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

By the way, if the form contains solely the <p:messages>, then you can alternatively also just get rid of the whole form altogether. The <p:messages> is not an EditableValueHolder nor ActionSource component and does therefore not require to be placed in an UIForm component. This way you can keep using your initial attempt.

• 如何找出要进行Ajax更新/渲染的组件的客户端ID?找不到表达式为"foo"的组件；引用自"bar"

这篇关于Primefaces RequestContext scrollTo不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！