JSF 中的锚点/跳转答案

【问题标题】：Anchor/JumpTo in JSFJSF 中的锚点/跳转
【发布时间】：2014-05-24 00:36:29
【问题描述】：

我使用 JSF + Primefaces 3.2.1。

页面上有一个p:datatable，在每一行我都有“编辑”按钮。当我单击该按钮时，页面的页脚会呈现一个用于编辑该行的表单。然后我需要向下滚动以更改值..

但我需要浏览器在单击基本 HTML 工作中的 Anchors 之类的“编辑”按钮后自动滚动到那里。

我找到了这个决定：

FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");

它可以工作，但是我的 update="@form" 无法正常工作。所以底部的表单不会呈现。刷新页面后渲染。

如何使用 p:commandButton 或 h:commandButton 来做到这一点？）

我的按钮：

<p:commandButton id="providerEdit" actionListener="#{providersPriceAppointment.setEditProvider(provider.id)}" icon="iconEdit" update="@form"/>

Bean方法：

public void setEditProvider(int id) throws IOException {
    for (int i = 0; i < providersList.size(); i++) {
        ProvidersExt p = providersList.get(i);
        if (p.getId() == id) {
            providerForEdit = p;
            break;
        }
    }
    enableEdit = true;
    FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");
}

页脚中的表格：

<a name="anchor1"/>
<p:fieldset id="editFieldset" legend="blablabla" rendered="#{providersPriceAppointment.enableEdit}"/>
    ...
</p:fieldset>

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

我在 PrimeFaces ShowCase 上找到的简单决定：

<p:fieldset id="edit" legend="Here you can edit.." rendered="#{providersPriceAppointment.enableEdit}">
    <p:focus context="panel"/>  
</p:fieldset>

当这个字段集被渲染时，浏览器直接跳转到这个地方） https://www.primefaces.org/showcase/ui/misc/focus.xhtml

希望有人会觉得这很有帮助 (",)

【讨论】：

焦点示例的 URL 现在是：primefaces.org/showcase/ui/misc/focus.xhtml

【解决方案2】：

使用 PrimeFaces RequestContext 和 scrollTo 来定位组件 ID：

https://www.primefaces.org/showcase/ui/misc/requestContext.xhtml

public void save() { 
    RequestContext context = RequestContext.getCurrentInstance();

    ...
    //scroll to panel
    context.scrollTo("form:panel");

【讨论】：

【解决方案3】：

在 JSF 或 Primefaces 中还没有实现类似的东西。但是由于您的应用程序中运行了 jQuery 框架（Primefaces），您可以使用 jQuery Animate 功能。

要获得有关如何实现此类功能的提示，您可以查看以下答案：

jQuery scroll to Element

对于您的应用程序，它会以某种方式出现：

将此添加到您的 <head> 元素：

function scrollToAnchor() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#editFieldset").offset().top
    }, 2000);
}

这将是按钮部分：

<p:commandButton id="providerEdit" 
    actionListener="# {providersPriceAppointment.setEditProvider(provider.id)}" 
    icon="iconEdit" onComplete="scrollToAnchor();" update="@form"/>

【讨论】：

我使用 primefaces 3.2.1，它有 jQuery v1.7.2，jQuery v1.7.2 是否支持 scrollTo 或 animate？
我做了一个快速的谷歌搜索，并在 jQuery v1.7.2 中找到了关于 .animate() 的文档。我在我的 JS 示例中发现了一个错误。我使用$ 而不是jQuery。我编辑了我的答案。请再试一次:)
未捕获的错误：语法错误，无法识别的表达式：editFieldset - 这是在 Google Chrome 控制台中。单击按钮后，表单更新，页脚中的 editFieldset 出现，但浏览器没有在那里滚动，并且我的应用程序中的每个按钮都失去了作用，我的意思是单击任何按钮都没有反应。
酷，我喜欢这个解决方案。工作就像一个魅力