Wicket: tell the browser to scroll to certain tag (anchor)

Question

We are using Wicket and our generated pages are quiet long (a lot of vertical scrolling). Some links or form's onSubmit methods invoke just perform some actions on the database and show the same page again:

public class MyPage extends WebPage {

    public MyPage(PageParameters parameters) {
        ....

        final Form<Void> form = new StatelessForm<Void>("formId") {
            protected void onSubmit() {
                // some database stuff
                ...
                setResponsePage(getClass(), getPageParameters());
            }
        };
        ...
    }
}

How can I make the setResponsePage invocation cause the browser scroll to the form, so the page is not just showing the top? Maybe some JavaScript-injection?

Also, see: http://stackoverflow.com/q/14436899/461499 – Rob Audenaerde Dec 08 '14 at 10:32 — Rob Audenaerde, Dec 08 '14 at 10:32

score 4 · Accepted Answer · edited May 23 '17 at 11:57

4

I think a nice Wicket-y solution combines stuff that is already in Michael's answer, with a Behavior, so you can just add this to your form.

form.add( new ScrollToTopBehavior());

The behaviour itself would like something like this:

public class ScrollToTopBehavior extends Behavior
{

    @Override
    public void renderHead( Component component, IHeaderResponse response )
    {
        super.renderHead( component, response );
        response.render( JavaScriptHeaderItem.forReference( Application.get().getJavaScriptLibrarySettings().getJQueryReference() ) );

        component.setOutputMarkupId( true );

        String script = String.format("doSomeJavaScriptStuff('%s')", component.getMarkupId());
        response.render( OnDomReadyHeaderItem.forScript( script ) );
    }
}

UPDATE:

For scrolling to a specific ID / ANCHOR only once, you can follow this answer: https://stackoverflow.com/a/3163635/461499

edited May 23 '17 at 11:57

Community

1
1

answered Dec 08 '14 at 10:15

Rob Audenaerde

19,195
10
76
121

Yes, it will add more elegance to my answer :) – Michael Zhavzharov Dec 08 '14 at 10:23
When to set this ScrollToTopBehavior? In the `onSubmit`-method? – Thomas S. Dec 08 '14 at 13:54
@Thomas, no, currently after `form` creation in your code (or creation of any other component you want this behavior applies to). – Michael Zhavzharov Dec 08 '14 at 13:59
But it only should scroll there after having clicked the Submit button. – Thomas S. Dec 08 '14 at 14:15
@Thomas, and it will. You should read [more](http://wicket.apache.org/guide/guide/advanced.html#advanced_1) about wicket behaviors – Michael Zhavzharov Dec 08 '14 at 14:21
It will scroll there every time the form is rendered. If you want more logic, you can add this logic to the behavior, for example with a setEnabled() method that is called from the form.onSubmit() – Rob Audenaerde Dec 08 '14 at 18:17

score 2 · Answer 2 · answered Dec 08 '14 at 10:00

JS of course.

This would be something like (with JQuery usage):

var scrollPosition = $('#scrollToMarkupId').offset().top;
$('html, body').animate({ scrollTop: " + scrollPosition + " }, 'slow');

where scrollToMarkupId is wicket component's markup id, which could be obtained by calling component.getMarkupId() method.

I'm not pro in JS, so you can try to google better impl may be.

Now, about wicket:

1) As for me, I prefer AJAX invocations for such behavior ( note that if you use such approach your page won't be stateless ):

// do not override your form's `onSubmit()` method
final Form<Void> form = new Form<Void>("formId");
// adding ajax behavior with `onSubmit()` method overriding.
form.add ( new AjaxFormSubmitBehavior ("submit")
{
    protected void onSubmit ( AjaxRequestTarget target )
    {
        // your submit logic
        // then insert js, descriped above:
        target.appendJavaScript ("..." + componentToScroll.getMarkupId() + "..");
    }
});

This approach won't reload your page at all but also post your data.

/----------------------------------------------------------------------------------------------------------------------------------/

2) You also could execute JS after page loading, by overriding renderHead method:

public class YourPage extends WebPage
{
...
    @Override
    public void renderHead ( final IHeaderResponse response )
    {
        //replace `...` by your script.
        response.render ( OnDomReadyHeaderItem.forScript ( "..." );
    }
...
}

Such script will be invoked after page is renedered (and setResponsePage method will render your page). You can use this approach for any components and panels too.

Thomas S. · Answer 3 · 2014-12-08T14:32:18.977

0

I've now use following JavaScript injecting code:

add(new Behavior() {
    @Override
    public void renderHead(Component component, IHeaderResponse response) {
        super.renderHead(component, response);

        response.render(new HeaderItem() {
            @Override
            public Iterable<?> getRenderTokens() {
                return Collections.singletonList("javascript-anchor");
            }

            @Override
            public void render(Response response) {
                response.write("<script type=\"text/javascript\">\n");
                response.write("window.location.href='#rules';\n");
                response.write("</script>\n");
            }
        });
    }
});

Feel free to comment (I'm a complete JS-noob with only very limited experience in Wicket).

edited Dec 08 '14 at 14:32

answered Dec 08 '14 at 14:24

Thomas S.

5,804
5
37
72

1

Hi Thomas, this look ok. I would try to remove the hard-coded #rules, but as you use this behavior as anonymous subclass I think it is ok. – Rob Audenaerde Dec 08 '14 at 19:59
1

Also, you can use Wicket to wrap the javascript: `response.write(JavaScriptHeaderItem.forScript("win......"));` – Rob Audenaerde Dec 09 '14 at 07:47

Wicket: tell the browser to scroll to certain tag (anchor)

3 Answers3

Linked