Recreate Scroll-Position after Paging (click on paging link)

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Recreate Scroll-Position after Paging (click on paging link)

brazz
I have created a custom paging component with the help of "org.apache.wicket.markup.html.navigation.paging.PagingNavigation".
In my PagingNavigator i have paging -links on top and at the bottom of the DataView.

Now, when the user clicks on a link, i want to recreate the scroll-position so that the screen does not "jump" after paging.

How can i submit the scroll-coordinates to the server when the user clicks on a
"org.apache.wicket.markup.html.navigation.paging.PagingNavigationLink" which is a "org.apache.wicket.markup.html.link.Link".

Is there a way to append the scroll-coordinates as query parameters to a
"org.apache.wicket.markup.html.link.Link" or is it only possible with Ajax-Links?

The problem is not the javascript-part of scrolling that already works with the help of behaviors.
Reply | Threaded
Open this post in threaded view
|

Re: Recreate Scroll-Position after Paging (click on paging link)

Martin Grigorov-4
Hi,

You'll need to add some JavaScript logic to your code to support that.
First add click listener to the navigation link that will extract the
current scroll coordinates and append them in the href.
Then you need to add ondomready listener so that after page's DOM is
ready you can parse the params from the query string and
scrollTo(coords)

With AjaxLink all this is not needed because only the pageable is
replaced and if it has the same size (items number) then there is no
change of the scroll position.

On Fri, Dec 23, 2011 at 4:58 PM, brazz <[hidden email]> wrote:

> I have created a custom paging component with the help of
> "org.apache.wicket.markup.html.navigation.paging.PagingNavigation".
> In my PagingNavigator i have paging -links on top and at the bottom of the
> DataView.
>
> Now, when the user clicks on a link, i want to recreate the scroll-position
> so that the screen does not "jump" after paging.
>
> How can i submit the scroll-coordinates to the server when the user clicks
> on a
> "org.apache.wicket.markup.html.navigation.paging.PagingNavigationLink" which
> is a "org.apache.wicket.markup.html.link.Link".
>
> Is there a way to append the scroll-coordinates as query parameters to a
> "org.apache.wicket.markup.html.link.Link" or is it only possible with
> Ajax-Links?
>
> The problem is not the javascript-part of scrolling that already works with
> the help of behaviors.
>
> --
> View this message in context: http://apache-wicket.1842946.n4.nabble.com/Recreate-Scroll-Position-after-Paging-click-on-paging-link-tp4228868p4228868.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>



--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Recreate Scroll-Position after Paging (click on paging link)

brazz
Hello Martin,

thanks for your reply. I solved it with the query parameters. Introducing AjaxLink would would have been propably to much rework as the paging component is already somewhat complex and i tried to reuse as much as possible of the PagingNavigator of wicket-extensions. Maybe next time i will try the ajax option.
Here's the code:


//save the scrollposition and append it as query parameter to 'href' attribute
public SimpleAttributeModifier createAppendScrollPositionAttModifier() {
                return new SimpleAttributeModifier(
                                "onclick",
                                                  "var params = { pageXOffset:top.window.pageXOffset, pageYOffset:top.window.pageYOffset };"
                                                + "\n var str = jQuery.param(params);"
                                                + "\n str = '&' + str;"
                                                + "\n var href=$(this).attr('href');"
                                                + "\n href = href + str;"
                                                + "\n $(this).attr('href', href);");
}


//scroll to previous scrolling position
public static AbstractBehavior createScrollBehavior(String pageXOffset, String pageYOffset){
                return BehaviorUtils
                                .createTemporaryOnloadJavascriptBehaviour(
                                                 "top.scrollTo(" + pageXOffset + "," + pageYOffset + ");"
                                                 );
}

//Add the scrolling behavior
String pageXOffset = getRequest().getParameter("pageXOffset");
                        pageXOffset = "null".equals(pageXOffset) ? "0" : pageXOffset;
                        String pageYOffset = getRequest().getParameter("pageYOffset");
                        pageYOffset = "null".equals(pageYOffset) ? "0" : pageYOffset;
                        add(BehaviorUtils.createScrollBehavior(pageXOffset, pageYOffset));