Anchor/JumpTo in JSF

Question

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>

score 3 · Answer 1 · edited May 23 '17 at 12:17

3

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

edited May 23 '17 at 12:17

Community

1
1

answered Apr 10 '14 at 12:48

Patrick Trautmann

399
2
10

I use primefaces 3.2.1, it have jQuery v1.7.2, is **scrollTo** or **animate** supported in jQuery v1.7.2? – rustemk Apr 11 '14 at 04:32
I did a quick google search and found documentation about .animate() in jQuery v1.7.2. I found a error in my JS example though. I used `$` instead of `jQuery`. I edited my answer. Please try it again :) – Patrick Trautmann Apr 11 '14 at 06:55
**Uncaught Error: Syntax error, unrecognized expression: editFieldset** - thats in Google Chrome console. And after clicking button, form updates, editFieldset in footer appears, but browser not scrolling there and every button in my app loses its action, I mean clicking on any button causes no reaction. – rustemk Apr 11 '14 at 07:54
Cool, I like this solution. Is working like a charme – codyLine Feb 24 '18 at 19:53

score 2 · Answer 2 · answered Nov 21 '17 at 13:23

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

score 0 · Answer 3 · edited Apr 08 '19 at 18:03

0

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 (",)

edited Apr 08 '19 at 18:03

jMarcel

865
5
24
48

answered Apr 11 '14 at 08:52

rustemk

66
1
9

URL for focus example is now: https://www.primefaces.org/showcase/ui/misc/focus.xhtml – Webel IT Australia - upvoter Nov 21 '17 at 09:42

Anchor/JumpTo in JSF

3 Answers3

Linked