Anchor/JumpTo in JSF | 易学教程

问题

I use JSF + Primefaces 3.2.1.

There is an p:datatable on the page, in each row I have button "Edit". When I click that button, in the footer of the page renders a form for editing that row. Then I need to scroll down there to change values..

But I need the browser to scroll there automatically after clicking on "Edit" button like Anchors in basic HTML work.

I found this decision:

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

It works, but with that my update="@form" not working.. So the form in the bottom not renders. It renders after refreshing page.

How can I do it with p:commandButton or h:commandButton ?)

My button:

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

Bean method:

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");
}

Form in the footer:

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

回答1:

There isn't something like this implemented in JSF or Primefaces yet. But since you have the jQuery Framework running in your application (Primefaces), you could use the jQuery Animate features.

To get a Hint on how to realize something like this, you could check out this answer:

jQuery scroll to Element

For your application that would be somehow like that:

Add this to your <head> element:

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

And this would be the Button Part:

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

回答2:

Use PrimeFaces RequestContext with scrollTo to target a component 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:

Simple decision that I found on PrimeFaces ShowCase:

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

When this fieldset is rendered, browser simply jump to this place) https://www.primefaces.org/showcase/ui/misc/focus.xhtml

Hope, somebody will find this helpful (",)

来源：https://stackoverflow.com/questions/22985761/anchor-jumpto-in-jsf

标签

jsf

primefaces