JSF中的锚定/跳转

我使用JSF+PrimeFaces3.2.1

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

但我需要浏览器在点击“编辑”按钮后自动滚动到那里，如基本HTML工作中的锚定

我发现这个决定：

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

它可以工作，但是我的更新=“@form”无法工作。。因此，底部的窗体不会渲染。它在刷新页面后呈现

如何使用p:commandButton或h:commandButton

我的按钮：

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

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>

Bean方法：

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

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>

public void setEditProvider（int-id）引发IOException{
对于（int i=0；i

页脚中的表单：

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

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中还没有实现类似的功能。但是，由于应用程序（Primefaces）中运行了jQuery框架，因此可以使用jQuery动画功能

要了解如何实现这一点，您可以查看以下答案：

对于您的应用程序，它可能是这样的：

将此添加到

元素：

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

---

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

要了解如何实现这一点，您可以查看以下答案：

对于您的应用程序，它可能是这样的：

将此添加到

元素：

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 ShowCase上找到的简单决策：

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

渲染此字段集时，浏览器只需跳到此位置）

---

希望有人会发现我在PrimeFaces ShowCase上找到的这个简单的决定很有帮助（“，”）

：

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

渲染此字段集时，浏览器只需跳到此位置）

---

希望有人会发现这个有用的（“，）

使用PrimeFaces RequestContext和

滚动到

来定位组件id：

---

将PrimeFaces RequestContext与

scrollTo

一起使用，以组件id为目标：

---

我使用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出现，但浏览器没有在那里滚动，我的应用程序中的每个按钮都会失去动作，我的意思是点击任何按钮都不会引起反应。酷，我喜欢这个解决方案。是否像charmeI一样使用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出现，但浏览器没有在那里滚动，我的应用程序中的每个按钮都会失去动作，我的意思是点击任何按钮都不会引起反应。酷，我喜欢这个解决方案。正在像焦点的charmeURL一样工作示例为now:URL焦点示例为now: