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

Why don't you keep track of the original position throughout the flow and use it to maintain the state? — royalghost, Oct 31 '17 at 20:58
It would be a valid option, but I can't find anywhere how to track the position :( — David Misic, Oct 31 '17 at 21:02
Seems like you need to include anchor links in your forward or redirect urls. — tsolakp, Oct 31 '17 at 21:27
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 :/ — David Misic, Oct 31 '17 at 22:24
tsolakp - So, I'm supposed to anchor the chat div and simply pass it in the controller? — David Misic, Oct 31 '17 at 22:25

score 0 · Answer 1 · answered Oct 31 '17 at 21:53

0

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.

answered Oct 31 '17 at 21:53

Srikanth Anusuri

1,234
9
16

I am aware that I should be using asynchronous communication to the server. My question is how. – David Misic Oct 31 '17 at 22:25
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](http://api.jquery.com/jquery.ajax/) or [Angular](https://docs.angularjs.org/api/ng/service/$http) like frameworks. – Srikanth Anusuri Nov 01 '17 at 16:10

score 0 · Answer 2 · answered Sep 17 '20 at 13:58

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.

score 0 · Answer 3 · answered Feb 06 '23 at 10:14

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>

score -1 · Answer 4 · answered Nov 01 '17 at 05:14

-1

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>

answered Nov 01 '17 at 05:14

LT56

187
6

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

4 Answers4

Linked