How to keep page position after returning a JSP in Spring/MVC

Question

I am working on a platform, with comments, messages etc... Surprisingly, I can't find the answer anywhere!

I'm trying to keep the same position of the page after a post method, and when I return a jsp from the controller. The problem is, whenever I send a message for an example, or post a comment, the page returns, but returns in the top position which is annoying and ineffective. How can I keep the page and scroll at the same position after returning or redirecting from the controller?

I'll post some example code:

@RequestMapping(value = "/{recipient}", method = RequestMethod.POST)
public String chatPost(@PathVariable("recipient") String recipient, @ModelAttribute("message") Message message, Model model, Principal principal) {
    Date date = new Date();
    message.setCreationDate(date);
    Profile recipientObj = profileService.getProfileByUsername(recipient);
    messageService.sendMessageTo(message, recipientObj);
    return "redirect:/message/" + recipient;
}

Lozada

Why don't you keep track of the original position throughout the flow and use it to maintain the state? – Decrescent

It would be a valid option, but I can't find anywhere how to track the position :( – Lozada

Seems like you need to include anchor links in your forward or redirect urls. – Joanniejoao

Or perhaps you should just be using AJAX. – Ureter

Yes, AJAX is a valid option as well, however, I don't know JavaScript and coding an AJAX function is something I can't do. I'd like to learn JavaScript so that I could do these things on my own, but I can't find any good tutorials with Spring, MVC and AJAX :/ – Lozada

tsolakp - So, I'm supposed to anchor the chat div and simply pass it in the controller? – Lozada

Answer 1

I am assuming that the button click is doing an HTTP post to the server. In order to avoid the full page load, you will need to use Javascript on the web page so that the communication to the server is done asynchronously. Based on the response from the server, your javascript code will need to update the page appropriately. This should not affect the positioning of the web page as technically you never left the page.

Zsazsa

I am aware that I should be using asynchronous communication to the server. My question is how. – Lozada

You will need to use AJAX in order to do that. There are a lot of Javascript frameworks that support this out of the box with simplified syntaxes. Consider looking into jQuery or Angular like frameworks. – Zsazsa

Answer 2

Before you send the request, save the current scroll position in session storage using js. Then, when the view reloads, use js to retrieve the value from session storage and assign it to the scrollTop property of the document or body/div element.

Note that if you load this js code when the whole document is ready you'll probably see the initial state (scrollTop = 0) before the retrieved value is setted. So, this block of js code must be executed as soon as the element to be scrolled exists.

Skeens

Answer 3

I cobbled together a js script that maintains page position and does so per page. I jus take the full location href, strip out colons and slashes for good measure, then use that as part of the key in session storage.

<script>
    $(window).scroll(function () {
        let pageName = location.href.replaceAll('/','').replaceAll(':','');
        // console.log('scrolled ' + pageName);
        sessionStorage[pageName + '_scrollTop'] = $(this).scrollTop();
    });
    $(document).ready(function () {
        let pageName = location.href.replaceAll('/','').replaceAll(':','');
        if (sessionStorage[pageName + '_scrollTop'] != "undefined") {
            // console.log('restored ' + pageName);
            $(window).scrollTop(sessionStorage[pageName + '_scrollTop']);
        }
    });
</script>

Suggestible

Answer 4

Use anchor links and redirect the post back to "mypage.jsp#myAnchor"

 <a name="myAnchor">Important Section</a>
 <section class="important">Javscript is cool!</section>

Unchaste